我可以在繪製之前在Canvas2D中定義一個矩形嗎？

基本上，我想有一個大的矩形，並從中切出較小的矩形。我可以繪製矩形，然後執行clearRect（x，y，w，h），但它刪除了之前繪製的東西，甚至創建矩形。我可以在繪製之前在Canvas2D中定義一個矩形嗎？

所以基本上，我可以在圖像上畫一個矩形，然後切割矩形而不影響它下面的圖像？我對使用ctx.save和恢復有一個小小的想法，但我無法完全實現它 - 而且我不是100％確定這是正確的答案。

任何幫助將不勝感激！

感謝，

凸輪

來源

2016-03-06 Cameron C

另一種可能是使用路徑：

呼叫context.beginPath()
與moveTo和lineTo和closePath定義外RECT，順時針方向進行
以同樣的方式挖出這些洞，但是，反轉clockwi se
撥打context.fill()填充沒有孔的矩形。

這隻適用於你從一開始就知道所有漏洞的情況。這個答案有更多的細節這種方法： Polygon with a hole in the middle with HTML5's canvas

來源

2016-03-06 00:49:01

感謝您的幫助。在我自己的時間裏，我發現了一個不同的解決方案，你可以在這個問題的答案部分看到它。無論如何，非常感謝您抽出時間來解釋您的解決方案:) –

感謝markE和斯蒂芬提供的解決方案。然而，經過幾個小時的搜索，我找到了自己的答案根據this答案。我不知道爲什麼它的工作原理，但檢查出什麼碼我下面使用：

ctx.fillStyle = "grey"; 
ctx.beginPath(); 
ctx.rect(100, 100, 50, 50); 
ctx.rect(400, 0, -400, 400); 
ctx.fill();

出於某種原因，如果你申報你想先切出什麼形狀，然後BACKWARDS繪製疊加形狀（？！）在你的區域，它削減了形狀。 WTF Javascript？無論如何，它的工作原理:)

來源

2016-03-06 00:52:13

我猜測它是向後繪製的，基本上確保它是逆時針繪製的。另一種可能是調用'ctx.fill（'evenodd'）;'，請參閱我的回答中的鏈接 –

[以下是它的工作原理：]（https://www.w3.org/TR/2dcontext/）。 * fill（）方法必須填充當前路徑的所有子路徑，使用fillStyle並使用非零卷繞編號規則。打開的子路徑在填充時必須隱式關閉（不影響實際的子路徑）。因此，如果兩個重疊但獨立的子路徑具有相反的繞組，則它們抵消並導致不填充。* **但是（！），**瀏覽器現在開始允許「偶數」繞組。如果使用，這會破壞你的代碼。您可能想要爲您的任務使用更多顯式方法。 ;-) – markE

我可以在繪製之前在Canvas2D中定義一個矩形嗎？

回答

相關問題