我对canvas还不太熟悉,遇到了一些问题。
我想要实现一个目标:在单个canvas中显示两张图片;其中一张是背景图,另一张是剪切为PNG格式的图像并出现在上方。
我已经完成了其中一部分,但是遇到了难题,不知道如何解决。
我已经在jsFiddle上创建了一个示例,网址为:http://jsfiddle.net/jhp79yg9/。
在这个例子中,我将第一张图片的大小从540x540减小到了140x140,只是为了方便观察是否出现问题,而事实上确实出现了问题。
问题在于它没有显示第二张图片,而是两次显示了“img1”变量,根本没有显示“img2”。
有人可以提供帮助吗?
此外,我也无法确定前景和背景中分别是哪张图片。如果能提供帮助,那就更好了(裁剪后的图片应该在前景)。
谢谢!
我想要实现一个目标:在单个canvas中显示两张图片;其中一张是背景图,另一张是剪切为PNG格式的图像并出现在上方。
我已经完成了其中一部分,但是遇到了难题,不知道如何解决。
我已经在jsFiddle上创建了一个示例,网址为:http://jsfiddle.net/jhp79yg9/。
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('canvas');
var context = canvas.getContext('2d');
var sources = {
img1: 'https://scontent-iad3-1.cdninstagram.com/hphotos-xaf1/t51.2885-15/11351598_1454928098145798_1274636321_n.jpg',
img2: 'https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11379733_1139595366067106_273993739_n.jpg',
mask: 'http://img12.deviantart.net/65e4/i/2013/003/6/6/png_floating_terrain_by_moonglowlilly-d5qb58m.png'
};
loadImages(sources, function(images) {
context.drawImage(images.img2, 0, 0, 240, 240);
context.drawImage(images.mask, 20, 95, 500, 349);
context.globalCompositeOperation = 'source-in';
context.drawImage(images.img1, 0, 0, 540, 540);
});
<canvas id="canvas" width="540" height="540"></canvas>
问题在于它没有显示第二张图片,而是两次显示了“img1”变量,根本没有显示“img2”。
有人可以提供帮助吗?
此外,我也无法确定前景和背景中分别是哪张图片。如果能提供帮助,那就更好了(裁剪后的图片应该在前景)。
谢谢!
img2
被绘制出来了,但是当mask
覆盖在上面时,两者被视为一个整体,然后使用source-in
绘制img1
,根据 alpha 通道的值替换像素。img1
不会被绘制两次。至少对我来说是这样(Firefox 39)。 - Sebastian Simon