如何从画布中删除以前的绘制图像

我一直在尝试在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

如何从画布中删除以前的绘制图像

回答

相关问题