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() 방법은 두 개의 좌표 (x 및 y)을 갖는다. documentation을 보면 drawImage() 메서드의 두 번째 및 세 번째 매개 변수는 이미지의 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 값이고 두 번째 10 값은 y입니다.

Answer 3

는 X를 사용하여 이미지를 이동할 수 있고, 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