HTML Canvas 中可以有多个剪切区域吗?
-
23-09-2019 - |
题
我有代码将一堆图像加载到隐藏的 img 元素中,然后使用 Javascript 循环将每个图像放置到画布上。但是,我想剪切每个图像,使其在放置在画布上时成为一个圆圈。
我的循环如下所示:
$$('#avatars img').each(function(avatar) {
var canvas = $('canvas');
var context = canvas.getContext('2d');
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.beginPath();
context.arc(x+24, y+24, 20, 0, Math.PI * 2, 1);
context.clip();
context.strokeStyle = "black";
context.drawImage(document.getElementById(avatar.id), x, y);
context.stroke();
});
问题是,仅绘制了第一张图像(或可见)。
如果我删除裁剪逻辑:
$$('#avatars img').each(function(avatar) {
var canvas = $('canvas');
var context = canvas.getContext('2d');
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.drawImage(document.getElementById(avatar.id), x, y);
});
然后我所有的图像都被绘制出来了。
有没有办法单独裁剪每个图像?
我尝试将剪切区域重置为图像之间的整个画布,但这不起作用。
解决方案
您应该尝试保存当前上下文状态然后恢复它:
canvas = document.getElementById("area");
context = canvas.getContext('2d');
$("#avatars img").each(function(avatar) {
var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);
context.save();//push current state into canvas
context.beginPath();
context.arc(x + 24, y + 24, 20, 0, Math.PI * 2, 1);
context.clip();
context.strokeStyle = "black";
//draw image this way
var img = new Image();
img.src = avatar.src;
img.onload = function() {
context.drawImage(img, x, y);
};
context.stroke();
context.restore();//restore context to the state
});
我认为当您调用drawImage方法时,您还需要通过添加已经存在于您的源代码行来将图像参数设置为Image类 avatar.src参数.
您应该检查参考文档 画布状态
不隶属于 StackOverflow