canvas animated clock

I am learning canvas recently, and then I made an animated clock based on the example on MDN (why build a wheel, because it is ugly...)

This is an example on MDN, how should I say, it is more retro.

First, find a picture of a clock, which is the one below.

——from the dribbble website of bigger than bigger, image source (deleted)

Then start using canvas to realize this stylish clock. Insert the canvas tag in the html code

<canvas id="canvas" width="400" height="400"></canvas>

Create the canvas in the js file (assuming we are using modern browsers).

function clock() {
  var ctx = document.getElementById('canvas').getContext('2d');
}

Let’s draw the clock face first. We see that this picture has light and shadow effects. It is too difficult to draw the same. So I used color gradients to make the clock look a little more three-dimensional. Use createLinearGradient in canvas to create a new gradient, color it with addColorStop, and finally assign the color to strokeStyle. For details, see Using Styles and Colors by MDN

//绘制表盘底色
ctx.translate(200, 200); //将坐标原点移到画布中心
ctx.rotate(-Math.PI/2); //将坐标轴逆时针旋转90度，x轴正方向对准12点方向
var lingrad = ctx.createLinearGradient(150, 0, -150, 0);
lingrad.addColorStop(0, '#242f37');
lingrad.addColorStop(1, '#48585c');
ctx.fillStyle = lingrad;
ctx.beginPath();
ctx.arc(0, 0, 150, 0, Math.PI * 2, true);
ctx.fill();

The key point is that the positive direction of the x-axis of the canvas is the 3 o'clock direction of the clock. For convenience, we rotate it 90 degrees counterclockwise so that it points to 12 o'clock. direction.

To draw scales, rotate (Transformations by MDN) is used. There are 12 hour scales. The angle between two adjacent scales and the center of the circle is Math.PI/6. Here it is expressed in radians, which is 30 Spend. Then we use a for loop to draw the hour scale.

for (var i = 0; i < 12; i++) {
  ctx.beginPath();
  ctx.strokeStyle = &#39;#fff&#39;;
  ctx.lineWidth = 3;
  ctx.rotate(Math.PI / 6);
  ctx.moveTo(140, 0);
  ctx.lineTo(120, 0);
  ctx.stroke();
}

Similarly, the minute scale is the same.

ctx.beginPath();
for (i = 0; i < 60; i++) {
  if (i % 5 !== 0) { //去掉与小时刻度重叠的部分
    ctx.beginPath();
    ctx.strokeStyle = &#39;#536b7a&#39;;
    ctx.lineWidth = 2;
    ctx.moveTo(140, 0);
    ctx.lineTo(130, 0);
    ctx.stroke();
  }
  ctx.rotate(Math.PI / 30);
}

The dial is roughly drawn and the scales are drawn. The next step is to draw the pointer and make it point to the correct time, right? Isn't it just drawing a straight line? The key is what is the angle at which the pointer rotates? In fact, it is relatively simple. First get the current time and convert the hour to 12-hour format.

var now = new Date(),
    sec = now.getSeconds(),
    min = now.getMinutes(),
    hr = now.getHours();
hr = hr > 12 ? hr - 12 : hr;

Then, the position of the hour hand is (the angle rotated relative to the positive direction of the What we get is the requestAnimationFrame method, which is used to redraw the page to obtain a coherent frame-by-frame animation to achieve the best animation effect.

ctx.rotate(hr * (Math.PI / 6) + min * (Math.PI / 360) + sec * (Math.PI / 21600));

This callback is our clock() function that draws the clock. It should be noted that the canvas needs to be cleared after each execution of requestAnimationFrame, otherwise overlapping and interlacing will occur. We place it at the beginning of the clock function.

ctx.rotate(min * (Math.PI / 30) + sec * (Math.PI/1800));
 //分针ctx.rotate(sec * (Math.PI /30)); //秒针

At this point, the animated clock is OK. The rendering is as follows: