Shulou(Shulou.com)06/01 Report--

This article focuses on "how to clear canvas canvas content in front-end development", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to clear canvas canvas content in front-end development.

Clear the canvas canvas content

1. Reset width or height

Because the canvas content is emptied whenever the height or width of the canvas is reset, you can clear it in the following ways: (this method is only for cases where all content needs to be cleared):

Var c=document.getElementById ("myCanvas"); c.width=c.width

2 、 clearRect

Var c=document.getElementById ("myCanvas"); var ctx=c.getContext ("2d"); ctx.fillStyle= "red"; ctx.fillRect (0memo 0300150); ctx.clearRect (20meme 20jue 100jue 50)

3 、 globalCompositeOperation

Refer to the globalCompositeOperation () function, which is used to combine colors on the canvas, and we can use this principle of superposition (mathematical OR principle) to make erasers.

First, take a look at the values that can be set by the globalCompositeOperation property and their effects:

The value description source-over defaults. Displays the source image on the target image. Source-atop displays the source image at the top of the target image. The part of the source image that lies outside the target image is not visible. Source-in displays the source image in the target image. Only the part of the source image within the target image is displayed, and the target image is transparent. Source-out displays the source image outside of the target image. Only the foreign image part of the target image is displayed, and the target image is transparent. Destination-over displays the target image above the source image. Destination-atop displays the target image at the top of the source image. Parts of the target image other than the source image are not displayed. Destination-in displays the target image in the source image. Only the part of the target image within the source image is displayed, and the source image is transparent. Destination-out displays the target image outside the source image. Only the part of the target image outside the source image is displayed, and the source image is transparent. Lighter displays the source image + target image. Copy displays the source image. Ignore the target image. Xor combines the source image with the target image using XOR operations.

Canvas {border:1px solid # d3d3d3t10px;} var gco=new Array (); gco.push ("source-atop"); gco.push ("source-in"); gco.push ("source-out"); gco.push ("source-over"); gco.push ("destination-atop"); gco.push ("destination-in"); gco.push ("destination-out"); gco.push ("destination-over"); gco.push ("lighter") Gco.push ("copy"); gco.push ("xor"); for (n = 2) {ctx.moveTo (p. X, p. Y); for (var I = 1; I

< count - 2; i++) { // p = this.points.get(i); // ctx.lineTo(p.x, p.y); if (this.points.get(i).x == this.points.get(i + 1).x && this.points.get(i).y == this.points.get(i + 1).y) continue; var c = (this.points.get(i).x + this.points.get(i + 1).x) / 2; var d = (this.points.get(i).y + this.points.get(i + 1).y) / 2; ctx.quadraticCurveTo(this.points.get(i).x, this.points.get(i).y, c, d); //二次贝塞曲线函数 } // For the last 2 points if (count >

= 3) {ctx.quadraticCurveTo (this.points.get (I) .x, this.points.get (I) .y, this.points.get (I + 1) .x This.points.get (I + 1) .y) } else if (count > = 2) {ctx.lineTo (this.points.get (1) .x, this.points.get (1) .y);} ctx.stroke () } else {if (isDrawHit) {ctx.fillStyle = this.colorKey;} else {ctx.fillStyle = this.lineColor } if (ctx.canvas.id = = "hitCanvas") var radius = this.lineWidth + eraserRadius;// expands the range of lines on the hit, rubber radius else var radius = this.lineWidth Ctx.arc (this.points.get (0) .x, this.points.get (0). Y, radius, 0,2 * Math.PI); ctx.fill ();}

When drawing to hitCanvas, the lineWidth is enlarged with eraserRadius (circular eraser radius). The following picture is the colorKey color line drawn to hitCanvas, and the color value of each line is the key value colorKey in the image above. In addition, the line thickness is obviously much thicker than the white line above, because the eraser is a cur mouse style, its radius is very large, but the mouse click position is still only a pixel coordinate, so it will be thickened in order to expand the range of the mouse click on the line.

two。 Line erase and point erase

In this way, line erasure is easy to achieve, just find the color value of the eraser point to the coordinate point on the canvas, delete the item from the hash collection according to colorKey, and delete the whole line.

Point erasure needs to take into account erasure from both ends or from the middle:

If (that.isErasePoint) {line.points.foreach (function (I, p) {/ / whether the distance between the eraser and the point on the line is within the eraser radius if (Math.pow (p.x-point.x, 2) + Math.pow (p.y-point.y) 2) = 1 & & points2.length () > = 1) {/ / points1 and points2 are not empty Indicates that the erasure changes from the middle to two lines var preLine = editor.commonEditLogic.clonePenLine (line) Line.points = points1; var linePen = editor.bdCanvas.elementFactory.createPenLine (point, line.lineWidth, line.lineColor); linePen.points = points2; editor.bdCanvas.activeElement.setPenLine (linePen.colorKey, linePen) } else if (points1.length () = = 0 & & points2.length () > = 1) {/ / erase line.points = points2 from one end } else if (points1.length () > = 1 & & points2.length () = = 0) {/ / erase line.points = points1 from one end } else if (points1.length () = = 0 & & points2.length () = = 0) {/ / all points on the line are erased, delete the line editor.bdCanvas.activeElement.delPenLine (line.colorKey) } editor.courseware.currentBlackboard.draw (false, true);} at this point, I believe you have a deeper understanding of "how to clean up canvas canvas content in front-end development", so you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.