HTML5 Leinwand Bild anzeigen

Question

ich möchte mein Bild befehlen.

Grundsätzlich habe ich diesen Code bereits; Aber wie kann ich mein Bild an den gewünschten Ort verschieben? Wie ein bisschen links, mehr nach rechts, ich meine die Koordinaten ... wo soll ich es hier hinstellen?

if(document.getElementById('fig1').checked){ 
     var canvas = document.getElementById('displaycake_sketch'); 
     var context = canvas.getContext('2d'); 
     var imageObj = new Image(); 

     imageObj.onload = function() { 
     context.drawImage(imageObj, 10, 10); 
     }; 
     imageObj.src = 'http://lh3.googleusercontent.com/-fsFMyfNLNG8/TuZs45U0dZI/AAAAAAAAg38/QIjqug0MnAo/Ic42/barbie6.png'; 

     } 

Vielen Dank im Voraus!

Answer 1

drawImage() Die Methode der Leinwand hat zwei Koordinaten (x und y). Wenn Sie sich die documentation anschauen, sehen Sie, dass der zweite und dritte Parameter der drawImage() Methode die x-coordinates bzw. y-coordinates des Bildes darstellt. So können Sie das Bild an die gewünschte Position verschieben, indem Sie diese Koordinaten ändern.

context.drawImage(imageObj, 10, 10) 
          ^^

DEMO

var canvas = document.getElementById('displaycake_sketch'); 
 
var context = canvas.getContext('2d'); 
 
var context2 = document.getElementById('displaycake_sketch_2').getContext('2d'); 
 
var imageObj = new Image(); 
 
imageObj.src = 'http://lh3.googleusercontent.com/-fsFMyfNLNG8/TuZs45U0dZI/AAAAAAAAg38/QIjqug0MnAo/Ic42/barbie6.png'; 
 
imageObj.onload = function() { 
 
    context.drawImage(imageObj, 10, 10); 
 
    context2.drawImage(imageObj, 25, 85); 
 
};

#displaycake_sketch, #displaycake_sketch_2 { 
 
    background-color: pink; 
 
}

<canvas width="298" height="397" id="displaycake_sketch"></canvas> 
 
<canvas width="298" height="397" id="displaycake_sketch_2"></canvas>

Answer 2

context.drawImage(imageObj, 10, 10); 

Dies ist die Linie, die die Koordinaten steuert; der erste 10 ist der x Wert und der zweite 10 ist der y Wert.

Answer 3

man das Bild bewegen kann, X, Y mit .drawImage(image,x,y) Funktion Koordinaten

if(document.getElementById('fig1').checked){ 
     var canvas = document.getElementById('displaycake_sketch'); 
     var context = canvas.getContext('2d'); 
     var imageObj = new Image(); 

     imageObj.onload = function() { 
     context.drawImage(imageObj, 20, 20); 
     }; 
     imageObj.src = 'http://lh3.googleusercontent.com/-fsFMyfNLNG8/TuZs45U0dZI/AAAAAAAAg38/QIjqug0MnAo/Ic42/barbie6.png';  
} 

Referenz: https://www.w3schools.com/graphics/canvas_images.asp