HTML5キャンバス表示画像

Question

私は自分の画像を指示したいと思います。

基本的に私はこのコードを既に持っています。 しかし、イメージを希望の場所に移動するにはどうすればいいですか？ 少し左に、もっと右に、座標を意味するように...どこに置くべきですか？

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'; 

     } 

ありがとうございます！

Answer 1

キャンバスのdrawImage()方法は、2点の座標（xとy）を有しています。 documentationを見ると、drawImage()メソッドの2番目と3番目のパラメータはそれぞれ画像のx-coordinatesとy-coordinatesを表しています。したがって、これらの座標を変更することで、画像の周りを希望の場所に移動することができます。

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); 

これは座標を制御する行です。最初の10はxの値で、2番目の10はyの値です。 Xを使用して画像を移動させることができる

Answer 3

、Yは、.drawImage(image,x,y)機能

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';  
} 

リファレンスと座標https://www.w3schools.com/graphics/canvas_images.asp