在HTML5畫布上多次點擊區域？

我搞亂了HTML5畫布和裁剪。我想知道如何讓用戶點擊畫布，讓它剪裁一個圓圈，然後重複。所以基本上，用戶可以多次點擊，並且會有多個剪輯。在HTML5畫布上多次點擊區域？

我嘗試了一些解決方案，它與我想要的稍微相似，但它不起作用。

這裏是剪輯代碼：http://jsfiddle.net/cnbishop/8FzuB/：

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();

您可以在這裏的行動查看整個事情。現在你可以點擊一次，剪輯就可以工作，但是如果你再次點擊畫布，你可以得到一個新的剪輯。這甚至有可能嗎？

來源

2011-10-25 user1013479

你有點問：「嘿，你能調試我的代碼嗎？」，你的代碼有點複雜。不要整個應用程序，嘗試將其儘可能簡化爲最簡單的情況，並查看它無法使用的位置。 –

每次用戶剪輯時，都需要以某種方式在JS中保存此操作。下次用戶單擊時，您將檢索過去的裁剪，應用它，然後應用新的裁剪操作。

基本上，您需要按照與Canvas執行相同的順序重新應用歷史記錄中的所有剪切操作，因爲Canvas無法「記住」其先前的渲染。

我解釋了你的問題嗎？

來源

2011-10-26 16:19:29

在HTML5畫布上多次點擊區域？

回答

相關問題