JavaScript: Wie kann ich ein Bild in mein Canvas einfügen?

Servus!

Ich möchte gerne ein Bild in mein Canvas einfügen. Es klappt aber nicht und die Konsole zeigt auch keine Fehlermeldungen an.

Ich habe folgenden Code:

var canvas = document.getElementById("gameScreen");
var context = canvas.getContext("2d");
var imgBall = document.getElementById('img_ball');

function make_ball() {
  imgBall = new Image();
  imgBall.onload = function() {
    context.drawImage(imgBall, 10, 10);
  }
}

make_ball();

In der HTML-Datei habe ich noch src und die id (img_ball) in das img-Tag geschrieben.

Vielleicht findet ja von euch jemand den Fehler.

Dankeschön.

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

06.01.2020, 17:38

Damit:

imgBall = new Image();

überschreibst du das Bild-Objekt, welches du dir ein paar Zeilen weiter oben noch holst. Entferne die Zeile.

TheVieech

Fragesteller

06.01.2020, 18:57

das Bild wird leider noch immer nicht im Canvas angezeigt :( danke trotzdem! gibt es eigentlich Alternativen zu diesem drawImage(); ?

regex9

06.01.2020, 19:40

@TheVieech

Demzufolge machst du etwas anderes falsch.

Schau dir dieses Beispiel als Referenz an. Beachte, dass das Skript nach den beiden HTML-Elementen canvas und img eingebunden wird.

TheVieech

Fragesteller

11.01.2020, 17:47

@regex9

Danke Dir vielmals, es hat geklappt. Hat sich herausgestellt, dass das Bild nicht sichtbar war, da ich oben ein .clearRect() hatte. glg David

TheVieech

Fragesteller

17.04.2020, 16:20

@regex9

Serwus nochmal! Kannst Du mir sagen, wie man ein aus dem Internet ins Canvas eingefügte Bild bewegen kann?

regex9

17.04.2020, 18:04

@TheVieech

Lege dir in diesem Fall eine Image-Instanz an.

var imgBall = new Image();
imgBall.src = "Your image URL ...";

Alles andere verhält sich wie gehabt.

Hallo,

meine Code sieht gerade so aus. Es funktioniert aber nicht. Was müsste ich hier ändern?

<hmtl>
  <head>
    <title>hi guys</title>
  </head>
  <body>
    Schieberegler:
    <br>
    <canvas id="canvas" height='400' width='600'></canvas>
  </body>
  <br>
  <input id='slider' type='range' max="100" min="0">
  <p id='outpRadius'> 50 </p>
  <input type='color'>
  <hr>
  <script>
    'use strict';

    window.onload = function() {
      var slider = document.getElementById('slider')
      var output = document.getElementById('outpRadius');
      slider.addEventListener('input', aendereRadius, false)

      function aendereRadius() {
        output.innerHTML = slider.value;
        console.log(output.innerHTML);
      }

      var canvas = document.getElementById('canvas');
      canvas.style.backgroundColor = 'yellow';
      var ctx = canvas.getContext('2d');
      ctx.fillRect(50,50,50,output.innerHTML);
    }
  </script>
</html>

...zur Frage

JavaScript Variable mit Schieberegler anpassen?

Hallo,

ich programmiere zur Zeit mit Canvas ein kleines Spiel für die Schule. Allerdings gibt es da ein kleines Problem.

Ich möchte gerne die Geschwindigkeit des Spieler individuell mit Hilfe eines range input-Elements verändern. Allerdings bekomme ich es nicht hin, den Output erfolgreich der Variable zuzuordnen.

Hier der Code:

<body>
  <canvas id="canvas" width="600" height="400" tabindex="1"></canvas>
  <div class="slidecontainer">
    <input type="range" min="1" max="10" value="5" class="slider" id="gs" onchange="input(this.value);">
  </div>
  <script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var score = 0;

    // Spieler Werte
    var x = 50;
    var y = 100;
    var speed = 6;
    var sideLength = 50;
  </script>
</body>

...zur Frage

JS - Canvas: Kann mir bitte jemand genau erklären, was in der for Schleife passiert?

Hallo,

kann mir bitte jemand genau erklären, was in der for-Schleife in der Funktion "drawNumbers" passiert?

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90

drawNumbers(ctx,radius);

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(),0,0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }

...zur Frage

Wie erstelle ich eine Seite,wo das Audiodatei automatisch spielt?

Hallo Leute,

Zurzeit beschäftige ich mich mit Javascript und möchte,dass bei einer Seite die Audiodatei automatisch anfängt zu spielen,sobald ich die seite öffne.

Das ist mein Javascript Code:

function ton() {

var audio=document.getElementById("audio");

audio.innerHTML='<audio autoplay><source src="WIN_20211211_16_26_17_Pro.mp4" type="audio/mpeg"/></audio>';

}

</script>

...zur Frage

HTML Canvas: Wo ist mein Fehler?

HTML:

<canvas id="screen" style="width:200px; height:200px;"></canvas>

JS:

const canvas = document.getElementById("screen");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(0, 0, 80, 80);

Das sollte ein grünes Quadrat malen. Jedoch bekomme ich ein grünes Rechteck, das doppelt so hoch ist wie breit.

Warum?

Was mache ich falsch / Was habe ich übersehen?

Hier ein JSFiddle: https://jsfiddle.net/7cenmwh5/2/

...zur Frage

Ton abspielen Javascript?

Hallo,

Ich möchte auf meiner html Seite einen Sound abspielen, wenn ein Button geklickt wird. Die Seite läuft über den Localhost.

html:

 <script src="script.js"></script>
    <script src="anmeldungj.js"></script>
   <script src="/socket.io/socket.io.js"></script>
    <audio id="ringtone" src="Sound2.mp3"></audio>

JavaScript

var RingSound;
var Sound = new Audio('Sound2.mp3')
RingSound = document.getElementById("ringtone");
...
function Send() {
    if (delay && messageInput.value.replace(/\s/g, "") != "") {
        delay = false;
        setTimeout(delayReset, 1000);
        socket.emit("send", messageInput.value);
        messageInput.value = "";
        RingSound.play();
        Sound.play();
    }
}

Der Pfad stimmt:

Es wird aber kein Sound abgespielt, ich habe es über zwei Varianten versucht.

Ich hoffe jemand kann mir helfen

Jannik

...zur Frage

JavaScript Canvas Bilder werden Komisch angezeigt, Lösung?

Hallo,

ich bastele gerade mit dem HTML5 Canvas herum und möchte dort mit JavaScript ein Bild anzeigen, dies Funktioniert auch allerdings werden sie sehr komisch angezeigt, meist zu groß oder verschwommen hier der JavaScript code:

"function drawImage(url) {

var img = new Image();

img.onload = function () {

ctx.drawImage(img,10, 10, 35, 35);

}

img.src = url

hier habe ich schon mit den drawImage Parametern rumgespielt um es anzupassen allerdings kam kein gutes Ergebnis heraus...

Hier noch die canvas daten: width: 900px; height: 700px;

diese habe ich mit CSS angegeben.

Schonmal vielendank für eure Hilfe!

...zur Frage

Javascript mit onclick-Attribut ändern?

Hallo,

wie kann ich mit JavaScript ein Attribut ändern, wenn ich auf das entsprechende Objekt klicke?

Bis jetzt habe ich folgenden Code:

<img src="bild.png" onclick="elem.setAttribute("src","anderesbild.png");">

...zur Frage

HTML mehrere onclick?

<script>function play() {var audio = document.getElementById("sd_00143");audio.play();}</script><a href="#A1Acura RSX SH_"><img src="bilder/NFSU2/A1Acura RSX SH_.jpg" id="A1Acura RSX SH_" width="220" height="120" onclick="play()"><audio id="sd_00143" src="sd_00143.mp3"></audio></a>

<script>function play() {var audio = document.getElementById("Sexy Beam");audio.play();}</script><a href="#B4Audi A3 nude tits_"><img src="bilder/NFSU2/B4Audi A3 nude tits_.jpg" id="B4Audi A3 nude tits_" width="220" height="120" onclick="play()"><audio id="Sexy Beam" src="Sexy Beam.wav"></audio></a>

Beide Bilder spielen beim Anklicken Sexy Beam.wav. Kann jemand die multiplen Audiodateiaufrufe in einer einzigen HTML-Seite korrigieren?

...zur Frage

Javascript: Funktion nur ausführen wenn bedingung stimmt?

ich habe dieses JS :

function Rechner(){
	var x=document.getElementById("laenge").value;
	var y=document.getElementById("breite").value;
	document.getElementById("flaeche").value = xy;
}

jedes input hat das Attribut :

oninput="Rechner(this.value)"

Doch er soll die flaeche im Input nur ausgeben wenn wirklich laenge und breite ausgefüllt sind. derzeit zeigt er erst noch 0 an wenn nur 1 stimmt.

wie geht das ? kann man da irgendwie noch sagen "if isset laenge & breite" ?

...zur Frage

HTML: Bild durch bedingte Einstellungen anzeigen?

Wie kann ich ein Bild durch eine bedingte Option anzeigen? Es soll z.B. am Donnerstag, wenn die Uhrzeit zwischen 7 bis 21 Uhr ist, ein bestimmtes Bild anzeigen.

<script>
  document.write('<div id="contHour"></div>');
  mainDate = new Date();
  myHour = mainDate.getHours();
  mySeconds = mainDate.getSeconds();
  const weekday = [ "bild1.jpg", "bild2.jpg", "bild4.jpg", "bild14.jpg", "DO14.png", "bild20.jpg", "bild21.jpg" ];
  const d = new Date();
  let day = weekday[d.getDay()];
  <!--	document.getElementById("demo").innerHTML = "<img src='"+day+"' />";>

  if (myHour >= 21 && myHour < 7) { //ab dieser Zeit wird ein bestimmtes Bild angezeigt
    document.getElementById("contHour").innerHTML = '<img src="M7.png" alt="kein Bild" />';
  }
  else if (myHour >= 7 && myHour < 8) {
    document.getElementById("contHour").innerHTML = '<img src="M7.png" alt="kein Bild" />';
  }
  else if (myHour >= 8 && myHour < 9) {
    document.getElementById("contHour").innerHTML = '<img src="M8.png" alt="kein Bild" />';

...zur Frage

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zur Frage

was ist hier falsch gelaufen?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rocket vs Aliens</title>
  <style>
    canvas {
      background-color: gray;
    }
    
  </style>
  <script>
    let KEY_SPACE = false;
    let KEY_UP = false;
    let KEY_DOWN = false;
    let canvas;
    let ctx;
    let backgroundImage = new Image();
    let rocket = {
      x: 100,
      y: 200,
      width: 200,
      height: 80,
      src: 'img/rocket.png'
    };
    let spaceship = {
      x: 500,
      y: 200,
      width: 100,
      height: 40,
      src: 'img/spaceship.png'
    };
    document.onkeydown = function(e) {
      if (e.keyCode ==32) { // Leertaste gedrückt
        KEY_SPACE = true;
      }
      if (e.keyCode ==32) { // unten gedrückt
        KEY_SPACE = true;
      }
    
      if (e.keyCode ==38) { // Oben gedrückt
        KEY_UP = true;
      }
    }
    document.onkeyup = function(e) {
      if (e.keyCode ==32) { // Leertaste losgelassen
        KEY_SPACE = false;
      }
    
      if (e.keyCode ==38) { // oben losgelassen
        KEY_UP = false;
      }
      if (e.keyCode ==40) { // unten losgelassen
        KEY_DOWN = false;
      }
    }
    function startGame () {
      canvas = document.getElementById('canvas');
       ctx = canvas.getContext('2d');
      loadImages();
      draw();
      // calculate
    }
    function loadImages() {
      backgroundImage.src = 'img/background.png';
      rocket.img = new Image();
      rocket.img.src = rocket.src;
      spaceship.img = new Image();
      spaceship.img.src = spaceship.src;
    }
    function draw() {
      ctx.drawImage(backgroundImage, 0, 0);
      ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.widht, rocket.height);
      
      requestAnimationFrame(draw);
    }
  </script>
</head>
<body onload="startGame()">
<canvas id="canvas" width="720" height="480"></canvas>
</body>
</html>

...zur Frage

[JavaScript] Wie kann ich ein Element von Anfang an unsichtbar machen?

Und nach einem erfolgreichem Login wieder sichtbar machen. Ich habe folgenden Code:

function getKey() {


  var visible = document.getElementById("download").style.display = "visible";
  var invisible = document.getElementById("download").style.display = "none";


  var key = "abc1";


  var keY = document.getElementById("key").value;


  if (key == keY) {
    visible;
    alert("r")


  } else {
    alert("w")
  }

Weder funktioniert er, noch wird das Element download wieder angezeigt.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen