[英]HTML5 canvas display image
我想命令我的形象。
基本上我已经有了这个代码; 但是如何将我的图像移动到所需的位置? 就像左边的一点点,更右边的,我的意思是坐标...我应该把它放在哪里?
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';
}
先感谢您!
canvas的drawImage()
方法有两个坐标( x
和y
)。 如果你看一下文档 ,你会看到, 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>
context.drawImage(imageObj, 10, 10);
这是控制坐标的线; 前10
是x
值,第二个10
是y
值。
您可以使用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';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.