0

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

这是绘图功能：

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 中不起作用，而且它还会破坏 canvas state。clearRect()应该可以清除屏幕。我究竟做错了什么？

4

2 回答 2

1

所以，对此感到很愚蠢，但显然，当你打电话时，rect()你还必须确保closePath事后打电话以关闭剪辑区域。很高兴我终于想通了，现在开始添加多个图层！

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

于 2013-03-05T17:24:16.900 回答
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);

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

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

于 2013-02-23T11:31:42.740 回答