Summary about HTML canvas

HTML5 The element is used for drawing graphics, which is done through scripts (usually JavaScript). The tag is just a graphics container, and you must use a script to draw graphics. , you can use Canva to draw paths, boxes, circles, characters and add images in a variety of ways.

Recommended: [Course] Dazzling Countdown Effect Canvas Drawing and Animation

Course Introduction: Canvas, as the name suggests, is a canvas defined on the browser. But Canvas is not just an element, it is a set of programming interfaces. Its emergence has exceeded the original document-based design intention of the Web. You can use it to develop a lot of dream content, allowing programmers to completely unleash their creativity!

1. HTMLcanvas Rectangular Shower

##Introduction: HTMLcanvas Rectangular array Rain is executed on the canvas. Get the full screen of the drawing environment. Get the screen width and screen height. Determine the width of each text to determine the column loop. Output timer. Call the HTML part. CSS part. Javascript part. This article ends here. I always believe in this world. It’s full of beauty and hope, come on!

2.

Detailed explanation of the code example for starting canvas in html5 (picture)

Introduction: 1) HTMLCanvasElement object Members: height - corresponds to the height attribute of the canvas element; width - corresponds to the width attribute of the canvas element; getContext() - returns the drawing context for the canvas; 2) Draw a rectangle: fillRect(x,y,w,h) ——Draw a solid rectangle; strokeRect(x,y,w,h)——Draw a hollow rectangle;

3.

canvas dynamic chart

The powerful functions of canvas make it a very important part of HTML5. As for what it is, I don’t need to introduce it here. Visual charts are one of the manifestations of the powerful functions of canvas.

Now there are many mature chart plug-ins implemented using canvas. Chart.js, ECharts, etc. can create beautiful and cool charts, and cover almost all chart implementations.

4.

H5 animation--an example of canvas drawing percentage progress of a circle

The first step is to draw a full circle with customized color, and the second step is to draw an inner circle , its radius should be smaller than the outer circle. Color is customized

The last step is to draw the third circle according to the percentage, and the color is customized.
To achieve the effect of the third step of dynamic drawing, just add a timer function, draw a distance every once in a while, and set a threshold
When it is greater than this threshold, clear the timer, this The threshold is actually the percentage value to be displayed. Each time you draw 0.01.
Note: When drawing in the timer, you need to draw the inner circle in the second step, and the blank circle is also drawn in the timer.

5.

Canvas implements the magnifying glass effect

Here we use the position of the mouse as the center point of the magnified area ( The magnifying glass moves as the mouse moves), because canvas needs to know the coordinates of the upper left corner and the width and height of the area when drawing a picture, so here we calculate the range of the area

6.

canvas transfer Tutorial for picture examples

Sometimes, we want to store the drawn canvas as a local picture. What should we do? Canvas provides an important method toDataURL(), which can save the data in the canvas. The pattern is converted into a base64-encoded png or other format image (based on the mine type parameter you passed in), and then the Data URL data is returned. Next let's see how it is implemented.

Related questions and answers:

1.

javascript - Help with the problem of canvas drawing mosaic, the color is always inaccurate

2.

javascript - Flickering issue when using canvas to change pictures.

【Related Recommendations】

1.

[Course]Canvas Drawing Clock

2.

canvas implements drawing Pacfish Effect

3.

Canvas achieves dynamic snowflake effect

The above is the detailed content of Summary about HTML canvas. For more information, please follow other related articles on the PHP Chinese website!