This case is an interview question found by browsing the posts. The original question was to complete with HTML elements. At that time, I happened to be doing something about canvas, thinking that it was too easy, so I used canvas to realize it and challenge myself.

What the case needs to know

  • Canvas is basically used, arc, fillRect, etc

  • ES6 class grammar

  • A little trigonometry

The effect is shown below


Analysis of the

This graph is relatively simple, are relatively neat graph, a picture is worth a thousand words, probably need to write the following functions. Maybe by this point, you’re smart enough to finish the case.

Logical structure

So let’s do the structure here, and I like to use the following structure

  • Constructor handles the arguments passed in when instantiating an object

  • Init initializes default parameters to reduce constructor bloat

  • Render focuses on the rendering functions

  • Update centrally processes updated data

class Scene {
  constructor() {... } init() { ... } render() { ... } update() { ... }// other method...
}Copy the code


The disc drawPane

The outer disk draws drawPane. The method of drawing the disk is actually very simple. Since there are many circles to draw, it can encapsulate such a function dedicated to drawing the disk

// Draw the circle apiarc(x, y, r, 0, 2*PI)
// Draw three circles in turn


drawArc(x, y, r, color='# 000') {
  ctx.fillStyle = color
  ctx.arc(x, y, r, 0.6.28)
Copy the code

Draw a minute scale drawPoint

Here use some trigonometric function knowledge, master these knowledge can be understood by looking at the picture, after understanding, translated into code is much easier, just calculate the corresponding X, Y coordinates, call the previous package drawArc method.

// Draw the scale
drawPoint() {
  for (let i = 0; i < 60; i++) {
    letx, y = ... this.drawArc(...) }}Copy the code

Draw the hour scale drawRect

There are a total of 12 hour-scale circles with a total of 360 degrees, and each scale is 360/12. The hour-scale seems to be similar to the minute scale, but in fact it is quite difficult because the default rotation center is (0,0), and you need to manually modify the rotation center every time you draw.

Pay attention to the point

  • Generally, save and restore are used to save and reset the state of Canvas when it is invoked for operations such as translation, scaling, rotation, miscutting and clipping

  • I’m going to add 90 degrees to rotate

drawScale() {
  // ...
}Copy the code

Draw a pointer

Drawing Pointers is much easier now that we have the basics above, but since we draw the minute-and-second Pointers similarly, we’ll pull them out and make them separate functions

drawScale(x, y, w, h, angle, color) {... }Copy the code

Calculating the Angle of a pointer, which may seem difficult, is actually very simple

For example

  • Second hand, minute hand a total of 60 scale, equal points 360 degrees -> 360/60

  • The hour hand has a total of 12 scales, evenly divided 360 degrees -> 360/12

That’s not enough, but there’s also the effect of seconds on minutes, seconds on minutes, so you can do it this way

// Offset Angle = number of current moments converted * unit Angle

sec * 360/60
(min + sec/60) * 360/60
(hour + min/60 + sec/60/60) * 360/12Copy the code


Same as drawPane

To discuss

There is one place that is not satisfied, the beginning of the animation is to define a timer to achieve, because it is not in the beginning of the design idea, after writing the temporary addition (in order to show the drawing process), I feel a little low, and want to better realize this function, there is a welcome comment to discuss


I hope reading this article will help you

If there are any mistakes in this article, please correct them in the comments section. If this article has helped you, please like it and follow it.

If you want to read more excellent articles, you can follow my github blog, your star✨, like and follow is my motivation to continue to create

Detailed code reference, Canvas real clock