如何從畫布中刪除以前的繪製圖像

我一直在嘗試在html頁面中打印弧線。我怎樣才能從頁面中刪除已經繪製的拱門？我寫了下面的代碼。如何從畫布中刪除以前的繪製圖像

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="1200" height="1000" 
style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<script> 

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
/*ctx.beginPath(); 
ctx.arc(600,500,20, 0.5*Math.PI,2*Math.PI); 
ctx.stroke(); 

ctx.beginPath(); 
ctx.arc(600,500,40, 0.5*Math.PI,2*Math.PI); 
ctx.stroke(); 
*/ 
var radius=20; 
for (i=0; i<10; i++) 
{ 
    var ctx = c.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(600,500,radius, 0.5*Math.PI, 2*Math.PI); 
    ctx.stroke(); 
    radius= radius+30; 
} 


</script> 

</body> 
</html>

我該如何做到這一點？

來源

2014-12-13 DrunkenMaster

對HTML畫布內容進行更改包括（1）清除之前內容的畫布--context.clearRect，然後（2）重新繪製當前所需的所有內容。 – markE 2014-12-13 16:26:35

呼叫clearRect方法：

ctx.clearRect(0, 0, 1200, 1000)

有四個參數：

區域的左上角的爲X軸，以擦拭的左上角的
爲Y軸要擦的區域
要擦的區域的寬度
要擦的區域的高度

所以使用這種方法，您可以擦除整個畫布或只是其中的某個部分。

來源

2014-12-13 12:17:15 Leo

這是一種超集刪除，如果我另外有另一個圈，它消滅兩個。難道只能清除弧線嗎？ – DrunkenMaster 2014-12-13 12:25:44

@ user3796318如果這是你的情況，通常的做法是在背景顏色完全相同的位置繪製另一條弧線。但是，如果背景是純色，這隻能是實用的。所以，另一種方法是......擦拭畫布並重繪你仍然需要的東西。 – Leo 2014-12-13 12:27:27

感謝您的回覆;）。所以'拿走'點不可能清除我們用ctx.arc（600,500，radius，0.5 * Math.PI，2 * Math.PI）生成的對象;可能類似ctx.arcclear（..相同的參數）？ :) – DrunkenMaster 2014-12-13 12:33:47

位圖不是矢量圖形。你不能簡單地刪除或修改你之前繪製的東西。通過在畫布上繪圖，您可以修改其圖像數據的像素顏色值。如果你需要撤銷一些東西，你必須自己維護一個獨立的數據結構和相關的數據。

例如，您可以在繪圖之前創建圖像數據的副本。之後您可以返回到此快照。 HTMLCanvasElement#toDataURL將完整圖像作爲可以用作圖像的src的url來返回。稍後，您可以在畫布上繪製此圖像以恢復所有後續更改。 HTMLCanvasElement#toBlob大致相同，但它返回一個blob。這可能會消耗更少的內存，但使用起來會更不方便。最方便的方法是CanvasRenderingContext2D#getImageData。你甚至可以用它來只複製圖像的一小部分。如果您有一個大的畫布，但只修改一個小區域中的像素，這很有用。

使修改無法修改的另一種方法是維護一個詳細的步驟列表。例如，無論何時繪製弧線，都將精確的參數存儲爲列表中的一個條目。 steps.push({type: 'stroke', style: 'rgb(0,0,0)', shapes: [{type: 'arc', x: 600, y: 500, radius: radius, from: 0.5 * Math.PI, to: 2 * Math.PI}]})您可以以任何方式刪除，重新排列或修改此列表中的元素，並擁有從頭開始繪製生成圖像所需的全部信息。基本上你已經實現了另一個矢量圖形庫。

來源

2014-12-13 13:53:04 Robert

如何從畫布中刪除以前的繪製圖像

回答

相關問題