Javascript 设置剪裁区域动画时清除画布时出现问题

我正在尝试实现一种类似于卡通杂烩汤（）的效果，在卡通杂烩汤（）中，形状充当下面保持静态的纹理的遮罩层。我已经开始尝试这个想法，创建一个渲染循环来清除画布，保存其状态，然后绘制一个矩形剪裁区域，然后绘制占据整个画布宽度和高度的背景纹理

下面是draw函数：

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帧的速度运行，更新矩形的位置并在剪切区域内剪切背景图像。（我知道代码的结构并不完美，但我只是在试验，看看这种效果在画布上是否可行）

---

我似乎遇到的问题是，循环上一次迭代中的剪辑区域挂起，产生了你在上面的小提琴中看到的奇怪效果。我已经尝试过在循环的

draw（）

步骤中对所有内容重新排序，但唯一有效的方法是

canvas.width=canvas.width

清除屏幕的技巧。我希望避免这种清除屏幕的方法，因为它在IE中似乎不起作用，而且它还会破坏画布

状态

<代码>clearRect（）应该可以清除屏幕。我做错了什么？

你使用的是与我相同的HTML5画布平装本，不是吗

如果您像我在JSFIDLE上那样设置了一个临时画布，如下所示：

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

像这样的函数可以从画布中剪切出一个部分：

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

因此给你浓汤的效果。好节目主持人，祝你好运。如果它不起作用，请告诉我

---

编辑：但是，此解决方案将忽略一些上下文缩放转换。只需对自己处理缩放的方式保持明智（如果你想要真正的“杂烩”效果，无论如何你都应该这样做）

因此，对此感到非常愚蠢，但显然，当你调用

rect（）

时，你还必须确保事后调用

closePath

，以关闭剪辑区域。很高兴我终于明白了，现在开始添加多个层

---

这是一把有用的小提琴：

很抱歉，更新了到的链接，该链接适用于meAlso，但没有说明原因。只是不可用。奇怪，对我来说很好。youtube区域是否限制某些视频？也许试试这个吧？谢谢你的主意，但不幸的是，这不起作用，和以前一样的问题。呃，是的，我似乎记得做了这个，然后忘了把它贴在这里。很高兴你明白了。现在，您应该意识到清理画布的

width=width

方法是不必要的，因为其他方法也会起作用。仅供参考

closePath

不是解决方案，是

beginPath

解决了您的问题

beginPath

重置路径，以便在绘制之前删除以前的路径条目<当您使用

rect

时，code>closePath不会执行任何操作，它始终会生成一个闭合路径。