Question

我正在尝试完成类似于你在卡通杂烩（example link）上看到的效果，其中形状用作下面保持静态纹理的遮罩层。我开始玩这个想法，创建一个渲染循环，清除画布，保存它的状态，然后绘制一个矩形剪裁区域，然后绘制占据画布的整个宽度和高度的背景纹理。

这是绘图功能：

function draw() 
{
    context.clearRect(0,0, 640, 480);
    context.save();
    x += velocityX;
    y += velocityY;
    context.rect(x, y, 40, 40);
    context.clip();
    context.drawImage(image, 0,0, 640, 480);
    context.restore();
}

基本上它只是以每秒60帧的速度运行，更新矩形的位置并在剪切区域内剪切背景图像。（我知道代码的结构不完整，但我只是在试验看看这个效果是否可以在画布上实现）。

http://jsfiddle.net/JERje/86/

我似乎遇到的问题是，循环的前一次迭代中的剪切区域会挂起，从而创建您在上面的小提琴中看到的奇怪效果。我尝试在循环的draw()步骤中重新排序所有内容，但唯一可行的是清除屏幕的canvas.width = canvas.width技巧。我想避免这种清除屏幕的方法，因为它似乎在IE中不起作用，它也会破坏画布state。 clearRect()应该可以清除屏幕。我做错了什么？

Answer 1

你使用的是相同的HTML5 Canvas平装本，我不是你。

如果像我在jsfiddle那样设置一个adhoc画布，就像这样：

var newCanvas = document.createElement('canvas');
newCanvas.getContext("2d").drawImage(image,0,0);

这样的函数可以破解该画布中的一个部分：

context.putImageData(newCanvas.getContext("2d").getImageData(x,y,40,40),x,y);

从而为您提供杂烩效果。好秀，祝你好运。 Pst我，如果它不起作用

编辑：但是此解决方案将忽略一些上下文缩放转换。只要聪明一点你自己如何处理规模（如果你想要真正的“杂烩”效果，你真的应该这样做）

Answer 2

所以，对此感到非常愚蠢，但显然当你致电rect()时，你还必须确保之后调用closePath以关闭裁剪区域。很高兴我终于弄明白了，现在又添加了多个图层！

这是工作小提琴：http://jsfiddle.net/JERje/129/

在动画剪裁区域时清除画布的问题

2 个答案: