Question

我一直在尝试在html页面中打印arc。如何从页面中删除已绘制的拱门？我写了下面的代码。

<!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>

我怎样才能实现这一目标？

Answer 1

位图不是矢量图形。您不能简单地删除或修改您之前绘制的内容。通过在画布上绘图，可以修改其图像数据的像素颜色值。如果您需要撤消操作，您必须自己维护一个单独的数据结构和相关数据。

例如，您可以在绘制图像之前创建图像数据的副本。然后您可以在之后返回此快照。 HTMLCanvasElement#toDataURL将完整图像作为网址返回，您可以将其用作图像的src。稍后您可以在画布上绘制此图像以还原所有后续更改。 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}]})您可以按照自己喜欢的方式删除，重新排列或修改此列表中的元素，并拥有从头开始绘制结果图像的所有必要信息。基本上你只实现了另一个矢量图形库。

Answer 2

调用clearRect方法：

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

这四个论点是：

要擦除的区域左上角的轴-X
要擦除的区域左上角的轴-Y
要擦拭的区域的宽度
要擦拭的区域的高度

因此，使用此方法，您可以擦除整个画布或仅擦除它的某个部分。

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

2 个答案: