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

This article introduces the knowledge of "how to draw a clock with html5". In the operation of practical cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Realize the effect

two。 About canvas

For more information about HTML's canvas, please see this article in the rookie tutorial. It is mainly through this article that I learn the basics of canvas. This small project also refers to the reference code attached to the article.

3. Code analysis

3.1 HTML section

Create a 500-inch-500 canvas with canvas tags

Your browser does not support canvas, please upgrade your browser.

3.2Creating context objects

Var canvas = document.getElementById ('clock')

Var ctx = canvas.getContext ("2d")

3.3 draw a circle

To facilitate later operations, the origin is first moved to the center of the canvas by the translate method (250250).

Ctx.strokeStyle = "black"

Ctx.translate (250,250); / / A certain coordinate origin to the original center

Ctx.lineWidth = 3

Ctx.beginPath ()

Ctx.arc (0,0,240,0,2 * Math.PI); / / draw the circle

Ctx.stroke ()

Ctx.closePath ()

3.4 draw a scale

Personally, I feel that this part is the most complex part of the whole project, but in fact it is not that complicated.

In this section, we do not need to consider the relevant coordinates of the slash. The extension lines of all the scales here pass through the origin (250250), so every time I draw a scale, I rotate the x-axis to coincide with the corresponding scale. In this way, when each tick mark is drawn, the y coordinate of the tick mark is 0. Since the axis has to be rotated once every time, the current state is saved by the method save () before each operation, and the state information is recovered by restore () after the operation.

For (let I = 0; I < 60; iTunes +) {/ / draw the scale.

Ctx.save ()

Ctx.rotate (- Math.PI / 2 + I * Math.PI / 30); / / rotate the axis. The square of axis x is calculated from up.

Ctx.beginPath ()

Var startX = I% 5? 210: 200

Ctx.moveTo (startX, 0)

Ctx.lineTo (230,0)

Ctx.lineWidth = I% 5? 2: 4

Ctx.stroke ()

Ctx.closePath ()

Ctx.restore ()

}

3.5 draw pointer

In fact, when you come here, the knowledge of canvas to be used is basically repeated as before. The basic idea of drawing a pointer is to calculate the angle of each needle through the current time of the system. Then rotate the axis to the corresponding angle, and finally draw a straight line. For the sake of beauty here, you can fillet the end of the pointer by setting ctx.lineCap = "round".

This is the end of "how to draw a clock with html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.