admin管理员组

文章数量:1417548

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>

How can i achieve this?.

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>

How can i achieve this?.

  • javascript
  • canvas
Share Improve this question edited Feb 2, 2020 at 15:16 Robert 2,66727 silver badges25 bronze badges asked Dec 13, 2014 at 12:00 DrunkenMasterDrunkenMaster 1,2783 gold badges16 silver badges30 bronze badges 1
  • Making changes to html canvas content involves (1) clearing the canvas of its previous content--context.clearRect and then (2) redrawing all the currently desired content. – markE Commented Dec 13, 2014 at 16:26
Add a ment  | 

2 Answers 2

Reset to default 2

Call clearRect method:

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

The four arguments are:

  1. axis-X of left top corner of the area to wipe
  2. axis-Y of left top corner of the area to wipe
  3. width of the area to wipe
  4. height of the area to wipe

So with this method, you could wipe either the whole canvas or just a certain part of it.

If you want to remove the whole previously drawn image please take a look at the other anwers. In the ments OP made it clear that this is not what he was trying to achieve. So instead I will answer the intended question:

How do I un-stroke a path?

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.

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 plete 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.

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.

本文标签： javascriptHow to remove a drawn arch from canvasStack Overflow

版权声明：本文标题：javascript - How to remove a drawn arch from canvas - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745272062a2650952.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。