Use clearRect () in HTML5CanvasAPI to implement the eraser function _ html5 tutorial tips-

This article mainly introduces how to use clearRect () in HTML5CanvasAPI to implement the eraser function. In this article, it is very practical to erase a part of the page to display the background image, if you need a paint brush, you can draw it 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

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

5. Getting started with using HTML5 clearRect () to erase the specified rectangular area
11. Your browser does not support canvas labels.