问题动画剪辑区域

当我试图完成类似于您可能会在卡通杂烩（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()应该可以清除屏幕。我究竟做错了什么？

来源

2013-02-22 Jeremy Simms

视频不可用。 – Niels 2013-02-22 16:50:31

对不起，更新了http://youtu.be/EDcICGLpybQ?t=29s的链接，对我来说工作正常 – 2013-02-22 16:53:36

也没有提供，不说明为什么。只是不可用。 – Niels 2013-02-22 16:55:26

所以，觉得这很愚蠢，但显然当你打电话给rect()时，你也必须请务必致电closePath以关闭裁剪区域。很高兴我终于明白了，现在来添加多个图层！

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

来源

2013-03-05 17:24:16

呃是的，我似乎记得这样做，然后忘记发布在这里。很高兴你想出来了。现在您应该认识到，清除画布的'width = width'方法不是必需的，因为其他方法将再次运行。 – 2013-04-22 00:55:51

仅供参考'closePath'不是解决方案，它是修复您的问题的'beginPath'。'beginPath'重置路径，以便在绘制之前删除先前的路径条目。无论如何，当你使用'rect'时，'closePath'什么也不做，它总是会产生一个封闭的路径。 – Prestaul 2015-01-23 07:08:07

您使用的是相同的HTML5画布平装我是不是你。

如果设置了即席油画像我一样对你的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我，如果它不工作

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

来源

2013-02-23 11:31:42

感谢您的想法，但不幸的是，这是行不通的，和以前一样的问题。 – 2013-03-05 16:59:13

问题动画剪辑区域

回答

相关问题