为剪辑区域设置动画时清除画布时出现问题

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 上那样设置一个临时画布：

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

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

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

从而给你杂烩效果。好演员，祝你好运。如果它不起作用，请告诉我

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

Answer 2

因此，对此感到非常愚蠢，但显然当您调用rect() 时，您还必须确保在之后调用closePath 以关闭剪辑区域。很高兴我终于想通了，现在开始添加多层！

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