The ugliest clock effect! JS Canvas Clock Making method _javascript skills

I'm going to send you an ugly clock today, honestly.

There is no debugging canvas tools, always in the browser to refresh the viewing effect, so tired ah ~
(┬_┬)

Code:

<!
 DOCTYPE html>  

This clock is not focused on how to draw, in trigonometric functions, the use of trigonometric function is closely related to the angle, Math.PI is Π,math.sin (), Math.Cos () They are accepted radians, so to

To convert the angle to radians, the clock before the time to judge the conditions of the clocks, the circle divided into 60 parts, each representative of a scale, and in the coordinates of the circle is the math in the positive direction, so

Need to adjust the starting coordinates, minus 90 degrees can be the same as the beginning of the clock.

Before learning canvas must be forgotten before the math function review, not some complex arithmetic can not do, canvas learning is the coordinates of the continuous confirmation, and then linked into the line

The final picture, which is the same as the point to line in mathematics, line to face the same truth.

The above code is not difficult to use line painting, is repeated use of line function and fill color. Oh, and there's an extra audio tag to use, to reach the clock's sound tick tock Tick tock

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.