Javascript/jQuery：從畫布中刪除形狀/路徑

我似乎無法找到在創建後從畫布中刪除形狀或路徑的功能。Javascript/jQuery：從畫布中刪除形狀/路徑

所以我創建與

beginPath(); 
bezierCurveTo(); 
stroke(); 
closePath();

2點之間的貝塞爾曲線如何從畫布一旦它被創建刪除此？我需要能夠通過toggle()和blur()調用刪除功能。我確信這件事存在...

在此先感謝您的幫助！

來源

2010-04-03 bobsoap

我只想提及在這裏和許多答案中使用'closePath（）'是錯誤的。它用於通過在路徑的起始處繪製一條線來完成路徑。在'stroke'後調用它確實沒有任何意義。** http://stackoverflow.com/questions/10807230/what-exactly-is-a-canvas-path-and-what-is-the-use-of- ctx-closepath – 2013-07-31 04:16:20

感謝偉大的輸入到所有的你 - 它幫我找到了解決方案：

context.clearRect(x,y,w,h);

（link）

這將清除矩形內的任何東西。

我在挖掘ILog保存/恢復上下文的答案時找到了頁面上的方法，並且它都在那裏。再次感謝。

來源

2010-04-03 19:18:46 bobsoap

據我記得的規範，你必須在繪製前調用context.save（），然後繪製一些東西，然後調用context.restore（）返回到先前的狀態。

來源

2010-04-03 17:25:53 ILog

感謝您的建議 - 我試過了（不成功），然後找到了這個資源（http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html ＃畫布狀態）說明：「當前路徑和當前位圖不是繪圖狀態的一部分，當前路徑是持久性的，只能使用beginPath（）方法重置，當前位圖是畫布的屬性，而不是上下文。「儘管如此，非常感謝！ – bobsoap 2010-04-03 18:45:06

保存/恢復僅對上下文的某些屬性進行操作，如果以後未繪製任何內容，調用它們將永遠不會在圖像上產生可見效果。 [本文]（http://www.tutorialspoint.com/html5/canvas_states.htm）提供了更多信息。 – 2012-10-15 13:32:12

無法從畫布中刪除路徑/形狀。您可以在其上繪製其他東西或清除畫布。

來源

2010-04-03 17:33:03 nxt

您可以嘗試使用SVG而不是畫布。有一個叫做Raphaël的精彩圖書館，它使SVG的工作變得輕而易舉。它也適用於所有瀏覽器，包括IE6。

使用SVG，每個形狀都是可以移動，轉換或移除的自己的元素。

來源

2010-04-03 18:40:24 bcherry

這看起來太棒了，我已經在研究它。謝謝！ – bobsoap 2010-04-03 19:19:33

這裏有一個回顧評論 - 如果你畫的很多，SVG通常不會比畫布更高效。我目前正在重構一個在SVG中使用canvas進行大量繪製的應用程序。 – 2014-06-22 14:35:19

如果你正在使用JQuery：

var elem = $("selector"); 
var canvas = elem.get(0); 
var context = canvas.getContext("2d"); 

context.clearRect(0, 0, canvas.width, canvas.height); 
context.beginPath();

替換「選擇」與你的實際jQuery選擇。

來源

2011-03-29 11:49:33

要清除你的畫布，使用下面的代碼

canvas_context.clearRect(0,0,canvas_1.width,canvas_1.height);

始終使用beginPath方法方法，當你開始你完成繪製路徑後得出一個新的路徑和closePath方法。

注：路徑未關閉不能被清除。

如果您的路徑沒有被清除，那一定是因爲上述原因。

所有路徑必須以 beginPath方法（）開始，以 closePath（）

例終：

 canvas_context.beginPath(); 
    canvas_context.moveTo(x1,y1); 
    canvas_context.lineTo(x2,y2); 
    canvas_context.stroke(); 
    canvas_context.closePath();

下面的代碼也會清除你的畫布

canvas_1.width = canvas_1.width;

注意：上述語句重新初始化畫布，因此清除畫布。任何重新初始化畫布的語句都會清除畫布。

來源

2011-07-23 14:07:42

「所有路徑必須以beginPath（）開始並以closePath（）結尾」 - 錯誤！請參閱http://stackoverflow.com/questions/10807230/what-exactly-is-a-canvas-path-and-what-is-the-use-of-ctx-closepath – 2013-07-31 04:18:39

只需在我的Chrome和您中再次進行測試是對的。早在2011年，當我在Chrome中進行測試時，未關閉的路徑從未被清除。無論如何，感謝您的更新。 – 2013-07-31 08:38:47

這是實現約<canvas>重要的事情。這是一個由像素組成的平坦圖像。一旦繪製了它，它就會合併到像素網格中，並且不能與其他像素區分開來。

如果需要能夠分離圖像元素你可以：

疊加<canvas>元素注入層的疊層
使用<svg>其中每個視覺元素是從其他元件不同的，並且可以是獨立操作

您可以將<canvas>視爲PhotoShop/Gimp/Fireworks中的單層或MSPaint文檔。

您可以將<svg>視爲Illustrator/InkScape中的文檔。

來源

2012-10-15 13:38:43

試試這個：

ctx.save(); 
ctx.globalCompositeOperation = "destination-out"; 
// drawing here you path second time 
ctx.restore();

「掌握globalCompositeOperation屬性設置如何形狀和圖像繪製到劃痕位圖」 specs

它是如何運作的，你可以看到here。

來源

2012-12-04 00:24:30 agegorin

Javascript/jQuery：從畫布中刪除形狀/路徑

回答

相關問題