Question

我正在搞乱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/。现在您可以单击一次并且剪辑有效，但如果再次单击画布，则可以获得新剪辑。这甚至可能吗？

Answer 1

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

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

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

HTML5画布上的多个点击区域？

1 个答案: