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

Question

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

这是绘图功能：

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平装本我不是你。

如果你设置了一个adhoc画布，就像我在你的jsfiddle上所做的那样：

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/