Use clearRect () in the HTML5 Canvas API to implement the eraser function. html5clearrect
In the real world, we use a paint brush to draw on the canvas. In html5 canvas, we can also use the canvas paint brush-CanvasRenderingContext2D object to draw on the canvas. As we all know, our paint brushes are usually used with erasers to correct mistakes in the painting process and re-paint. In html5 canvas, the CanvasRenderingContext2D object also provides us with an eraser-clearRect () method that can be reused forever.
Copy XML/HTML Code to clipboard
- ClearRect (x, y, width, height)
The clearRect () method of the CanvasRenderingContext2D object is used to clear all image pixels in the rectangular area of the canvas with the specified coordinate point (x, y) as the upper left corner, width as width, and height.
Next, let's look at a practical example. We first draw a solid circle with a radius of 50 PX, and then erase the local area using the eraser clearRect. The original html5 code for circular drawing is as follows:
Copy the content to the clipboard using JavaScript Code
- <! DOCTYPE html>
- <Html>
- <Head>
- <Meta charset = "UTF-8">
- <Title> using HTML5 clearRect () to erase the specified rectangular area </title>
- </Head>
- <Body>
- <! -- Add a canvas label and a red border to view the canvas -->
- <Canvas id = "myCanvas" width = "400px" height = "300px" style = "border: 1px solid red;">
- Your browser does not support canvas labels.
- </Canvas>
- <Script type = "text/javascript">
- // Obtain the Canvas object (Canvas)
- Var canvas = document. getElementById ("myCanvas ");
- // Check whether the current browser supports Canvas objects to avoid syntax errors in some browsers that do not support html5.
- If (canvas. getContext ){
- // Obtain the corresponding CanvasRenderingContext2D object (paint brush)
- Var ctx = canvas. getContext ("2d ");
- // Draw a circle with a coordinate point (, 10) as the center and a radius of 50 PX
- Ctx. arc (100,100, 50, 0, Math. PI * 2, false );
- // Draw and fill the circle
- Ctx. fill ();
- }
- </Script>
- </Body>
- </Html>
The corresponding display effect is as follows:
Now, we use the clearRect () method to erase the rectangular area of each 10 PX circle in the center of the circle (100,100.
Copy the content to the clipboard using JavaScript Code
- <Script type = "text/javascript">
- // Obtain the Canvas object (Canvas)
- Var canvas = document. getElementById ("myCanvas ");
- // Check whether the current browser supports Canvas objects to avoid syntax errors in some browsers that do not support html5.
- If (canvas. getContext ){
- // Obtain the corresponding CanvasRenderingContext2D object (paint brush)
- Var ctx = canvas. getContext ("2d ");
- // Draw a circle with a coordinate point (, 10) as the center and a radius of 50 PX
- Ctx. arc (100,100, 50, 0, Math. PI * 2, false );
- // Draw and fill the circle
- Ctx. fill ();
- // Erase the image in the rectangle area
- Ctx. clearRect (90, 90, 20, 20 );
- }
- </Script>
The corresponding display effect is as follows (is it a bit like a copper coin ?).
On the page, we can erase the area on a page to display the background image.
In the following example, we erase the blank area in the rectangle to display the page Background:
Copy the content to the clipboard using JavaScript Code
- <! DOCTYPE html>
- <Html lang = "zh">
- <Head>
- <Meta charset = "UTF-8">
- <Title> clearRect () </title>
- <Style>
- Body {background: url ("./images/bg2.jpg") repeat ;}
- # Canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto ;}
- </Style>
- </Head>
- <Body>
- <Div id = "canvas-warp">
- <Canvas id = "canvas">
- Does your browser support Canvas ?! Just change one !!
- </Canvas>
- </Div>
- <Script>
- Window. onload = function (){
- Var canvas = document. getElementById ("canvas ");
- Canvas. width = 800;
- Canvas. height = 600;
- Var context = canvas. getContext ("2d ");
- Context. fillStyle = "# FFF ";
- Context. fillRect (0, 0, 800,600 );
- // Clear the canvas
- Context. clearRect (0, 0, canvas. width, canvas. height );
- };
- </Script>
- </Body>
- </Html>
