Easily implement the HTML5 clock (share your understanding of canvas, which is not as difficult as you think)

Hey, guys! Let's use HTML5 to implement a simple clock!

 

When I came into contact with canvas, I suddenly felt very familiar with it. ------ the functions of canvas are actually different from those in Photoshop.Pen toolIs the same. So, if youPen toolCongratulations, canvas is coming soon ~~

To put it down, the canvas in HTML5 is translated into Chinese as a canvas. As the name suggests, canvas is certainly used for painting ~~

The idea of painting is basically the same as that of photoshop ~~, However, photoshop can be used as a visual tool, and HTML5/JS is just a matter of coding.

So to sum up, canvas is used for painting! As for what you want to draw, it's your own business!

 

GetContext ('2d ') in the canvas object is equivalentPen tool,The following describes their mappings:

BeginPath ----> start painting path

MoveTo -----> path start point

LineTo -------> draw a straight line path to a location

ClothPath ---> closed path

Stroke ------> stroke path (this is why when lineWidth is set to be greater than 1px, for example, 10px, it is divided by half from the center to the two sides, PSPen tool)

Fill -----------> fill path

BezierCurveTo and quadraticCurveTo are in PSThe essence of the Pen tool!

Wait ......

 

Well, if you are interested, you can go over the PSPen toolOh, I believe it will be helpful for you to understand the attributes and methods of getContext ('2d ') in the canvas object.

The following is the HTML5 clock implementation code:

1 <! Doctype html> 2  

You are welcome to shoot bricks. If there is a bug, please leave a message and remind me to help me with the recommendations ~~ Certificate ------------- Certificate

Bytes
Bytes
Bytes
Bytes
Bytes