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

Posted 2023-03-23

【中文标题】为剪辑区域设置动画时清除画布时出现问题

【英文标题】：Problems clearing canvas when animating a clipping region

【发布时间】：2013-02-08 08:45:44

【问题描述】：

我正在尝试实现类似于您在卡通杂烩 (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() 应该可以清除屏幕。我做错了什么？

【问题讨论】：

抱歉，已将链接更新为youtu.be/EDcICGLpybQ?t=29s，这对我来说很好

也不可用，但没有说明原因。只是不可用。

奇怪，对我来说很好用。 youtube 地区是否限制某些视频？

youtu.be/iX850GfvS9o 试试这个？

【参考方案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);    

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

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

【讨论】：

感谢您的想法，但不幸的是，这不起作用，和以前一样。

【参考方案2】：

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

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

【讨论】：

呃，是的，我似乎记得这样做了，然后忘记在这里发布。很高兴你想出来了。现在您应该意识到清除画布的width = width 方法不是必需的，因为其他方法将再次起作用。

仅供参考 closePath 不是解决方案，而是 beginPath 解决了您的问题。 beginPath 重置路径，以便在绘制之前删除先前的路径条目。当您使用 rect 时，closePath 什么都不做，无论如何都会产生一条封闭路径。