HTML5畫布顯示圖像

基本上我已經有這個代碼; 但是，如何將圖像移動到所需的位置？就像左邊的一點點，更靠右，我的意思是座標......我應該在哪裏放置它？

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

     }

預先感謝您！

來源

2017-02-27 Khyana

帆布的drawImage()方法有兩個座標（x和y）。如果您看documentation，您會看到，方法的第二個和第三個參數分別代表圖像的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>

來源

2017-02-27 13:38:56 m87

這是甜蜜的感謝，請問什麼是context2.drawImage（imageObj，25,85）;呢？ – Khyana

@DownCrow它只是爲了演示。別擔心。你可以使用'context.drawImage（imageObj，25，85）' – m87

context.drawImage(imageObj, 10, 10);

這是控制座標的線;第一個10是x的值，第二個10是y的值。

來源

2017-02-27 12:54:06 Feathercrown

附： - 在定義onload函數之前，我會設置源代碼。 – Feathercrown

oohhh很好謝謝你！ – Khyana

不客氣。：）任何時候！ – Feathercrown

可以移動用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

來源

2017-02-27 12:54:29

HTML5畫布顯示圖像

回答

相關問題