0

我在搞乱 HTML5 画布和剪辑。我想知道如何让用户点击画布，让它剪一个圆圈，然后重复。所以本质上，用户可以点击多次，就会有多个剪辑。

我尝试了一些与我想要的稍微相似的解决方案，但它不起作用。

这是剪辑代码：

context.save();

context.beginPath();
context.arc(mouseX,mouseY,50,50,Math.PI*2,true);
context.globalCompositeOperation = 'destination-out';
context.clip();
context.closePath(); 
var img = new Image();
img.src = canvasSnowflake.toDataURL();

context.drawImage(canvasSnowflake, 0, 0);

context.restore();

你可以在这里查看整个操作：http: //jsfiddle.net/cnbishop/8FzuB/。现在您可以单击一次并且剪辑可以工作，但是如果您再次单击画布，您可以获得一个新剪辑。这甚至可能吗？

4

1 回答 1

0

每次用户剪辑时，您都需要以某种方式在 JS 中保存此操作。下次用户单击时，您将检索过去的剪辑，应用它，然后应用新的剪辑动作。

基本上，您需要按照执行顺序重新应用历史记录中的所有剪辑操作，因为 Canvas 无法“记住”其先前的渲染。

我是否正确解释了您的问题？

于 2011-10-26T16:19:29.970 回答