我是 canvas 的新手,遇到了一些问题。
我正在努力实现一个最终目标:在一个 Canvas 上显示两个图像;一张图片是背景,另一张图片被裁剪为 PNG 并显示在顶部。
我已经走到一半了,但我遇到了一堵墙,我不知道如何过去。
我在 http://jsfiddle.net/jhp79yg9/ 为它创建了一个 jsFiddle
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>
在这个例子中,我将第一张图片的尺寸从 540x540 缩小到 140x140,这样我就可以判断它是否出错了,到底是不是出错了。
发生的事情是它没有显示第二张图片,而是显示了两次“img1”变量,而不是根本不显示“img2”。
谁能提供任何帮助?
我也分不清,因为它渲染的是同一张图片,哪个在前景,哪个在背景。在那里提供帮助将不胜感激(剪裁的图像应该在前景中)。
谢谢!
最佳答案
另一种方法是从当前内容中剪切出 mask ,然后在当前内容后面绘制背景:
loadImages(sources, function(images) {
context.drawImage(images.img2, 0, 0, 540, 540);
context.globalCompositeOperation = 'destination-out';
context.drawImage(images.mask, 20, 95, 500, 349);
context.globalCompositeOperation = 'destination-atop';
context.drawImage(images.img1, 0, 0, 540, 540);
})
关于javascript - HTML5 Canvas ;图像剪辑和多个图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31569561/