[英]Draw multiple image's on canvas with each image rotated
我是HTML5编程的新手,我想知道在将每个图像添加到画布后如何旋转它们。 是否应该将它们每个都放入画布中然后旋转? 如果是这样,如何将多个画布添加到单个画布上下文中。
小提琴: http : //jsfiddle.net/G7ehG/
码
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var sources = {
image1: 'http://farm3.static.flickr.com/2666/3686946460_0acfa289fa_m.jpg',
image2: 'http://farm4.static.flickr.com/3611/3686140905_cbf9824a49_m.jpg'
};
loadImages(sources, function(images) {
context.drawImage(images.image1, 100, 30, 200, 137);
context.drawImage(images.image2, 350, 55, 93, 104);
});
在您的评论中,您提到您了解context.rotate
,但是您不希望上下文保持旋转。 那根本不是问题。 首先,调用context.rotate
仅影响随后绘制的内容。 之前绘制的任何内容都会保持原样。 其次,绘制后很容易将其反转。
context.save()
创建所有当前上下文设置(包括当前旋转context.save()
的快照。 context.rotate(angle)
绘制图像。 角度以弧度表示 。 这意味着完整的360°圆为Math.PI * 2
。 图像将旋转的点是画布的当前原点(0:0)。 当要围绕图像中心旋转图像时,请使用context.translate(x, y)
将原点设置为希望图像中心所在的位置,然后旋转,然后在坐标-img.width/ 2, -img.height / 2
处绘制图像-img.width/ 2, -img.height / 2
context.restore()
返回到快照。 旋转和平移现在将像以前一样。 这是一个示例函数,该函数绘制在坐标100,100处旋转了45°的图像:
function drawRotated(image, context) {
context.save();
context.translate(100, 100);
context.rotate(Math.PI / 4);
context.drawImage(image, -image.width / 2, -image.height / 2);
context.restore();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.