如何从画布上删除绘制的拱门 [英] How to remove a drawn arch from canvas
问题描述
我一直试图在html页面中打印arc。如何从页面中删除已经绘制的拱门？我写了下面的代码。
I have been trying to print arc in the html page. How can i remove the already drawn arch from the page?. i have written the below code.
<!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>
我该如何实现？
推荐答案
如果要删除整个先前绘制的图像，请查看其他答案。 OP在评论中明确指出，这不是他要实现的目标。因此，我将回答预期的问题：
如何取消行程？
位图不是矢量图形。您不能简单地删除或修改以前绘制的内容。通过在画布上绘制，可以修改其图像数据的像素颜色值。如果需要撤消操作，则必须自己维护包含相关数据的单独数据结构。
A bitmap is not a vector graphic. You cannot simply remove or modify things you've drawn previously. By drawing on a canvas you modify the pixel color values of its image data. If you need to undo things you have to maintain a separate data structure with the relevant data yourself.
例如，您可以在绘制图像之前创建图像数据的副本。然后，您可以随后返回此快照。 HTMLCanvasElement＃toDataURL 返回完整的图像作为URL，您可以将其用作图像的src。稍后，您可以在画布上绘制此图像以还原所有后续更改。 HTMLCanvasElement＃toBlob 大致相同，但返回一个blob。这可能会占用较少的内存，但使用起来有些不便。最方便的方法是 CanvasRenderingContext2D＃getImageData 。您甚至可以使用它仅复制图像的一小部分。如果您有一块大画布，但只修改一个较小区域中的像素，这将很有用。
For example you could create a copy of the image data before drawing something. Then you could return to this snapshot afterwards. HTMLCanvasElement#toDataURL returns the complete image as an url which you can use as the src of an image. Later you can draw this image on the canvas to revert all subsequent changes. HTMLCanvasElement#toBlob does about the same but it returns a blob. This might consume less memory but it's a little more inconvenient to use. The most convenient method is CanvasRenderingContext2D#getImageData. You can even use it to copy only a small part of the image. This is useful if you have a big canvas but only modify pixels in a small region.
使修改不可撤消的另一种方法是维护步骤的详细列表。例如，每当绘制圆弧时，都将精确的参数存储为列表中的一项。 steps.push（{type：'stroke'，style：'rgb（0,0,0）'，shape：[{type：'arc'，x：600，y：500，radius：半径，从：0.5 * Math.PI，到：2 * Math.PI}]}）您可以按照自己喜欢的任何方式删除，重新排列或修改此列表中的元素，并具有所有必要的信息从头开始绘制结果图像。基本上，您只实现了另一个矢量图形库。
Another way to make modifications undoable is by maintaining a detailed list of your steps. For example whenever you draw an arc you store the exact parameters as one entry in the list. 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}]}) You can remove, rearrange or modify the elements in this list any way you like and have all necessary information to draw the resulting image from scratch. Basically you've implemented just another vector graphic library.
这篇关于如何从画布上删除绘制的拱门的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
