Teach you to achieve a simple Canvas clock effect

Abstract: today teaches you to write a canvas clock case, the effect may seem relatively simple, without those bells and whistles.

Share this article from Huawei cloud community " how to achieve the effect of a clock Canvas plain ", Author: Northern Lights night. .

1. First look at the effect:

Write a canvas clock case today. The effect may seem relatively simple, without those bells and whistles, but it involves a lot of canvas knowledge points, which is a must for beginners to learn canvas. Let's take you hand in hand to quickly realize it~

2. Implementation steps (source code at the end):

1. Set up basic labels and styles:

 <div class="clock">
   <canvas width="300" height="300" id="canvas"></canvas>
 </div>
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   body {
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: rgb(204, 204, 204);
   }
   .clock {
     width: 300px;
     height: 300px;
     background-color: rgb(15, 15, 15);
     border-radius: 50px;
   }

2. Start js code implementation, the following is for easy understanding, so a function encapsulates a function:

var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");

3. First draw the overall white chassis of the clock:

At the same time, in order to set the rotation point to the center of .clock later, the translate is offset by half the distance.

function drawPanel() {
        ctx.translate(150, 150);
        // 开始绘制
        ctx.beginPath();
        // 画一个圆
        ctx.arc(0, 0, 130, 0, 2 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();
      }

4. Draw the 12-digit number of the clock:

It can be seen that on a circle, its x coordinate is: R cos (its angle), and its y coordinate is: R sin (its angle).
At the same time, because Math.cos() and Math.sin() calculate radians, they need to be converted. Formula: radians = angle * π / 180

function hourNum() {
        // 存放12个数字
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        ctx.beginPath();
        // 数字的基本样式
        ctx.font = "30px fangsong";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "black";
        for (var i = 0; i < arr.length; i++) {
          ctx.fillText(
            arr[i],
            108 * Math.cos(((i * 30 - 60) * Math.PI) / 180),
            108 * Math.sin(((i * 30 - 60) * Math.PI) / 180)
          );
        }
      }

5. Draw the dot in the center of the clock:

A gray circle covers a slightly larger black circle.

function centerDot() {
        ctx.beginPath();
        ctx.arc(0, 0, 8, 0, 2 * Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle = "gray";
        ctx.arc(0, 0, 5, 0, 2 * Math.PI);
        ctx.fill();
      }

6. Draw the hour hand:

Assume that the parameters hours and minutes are the hours and minutes of the current time passed in.

function hourHand(hours, minutes) {
        // 应该旋转的角度，默认时钟为指向12点方向。
        var radius =
          ((2 * Math.PI) / 12) * hours + (((1 / 6) * Math.PI) / 60) * minutes;
       // 保存当前状态，为了旋转后能回到当初状态。
        ctx.save();
        ctx.beginPath();
        // 针的宽度
        ctx.lineWidth = 5;
        // 针头为圆角
        ctx.lineCap = "round";
        ctx.strokeStyle = "black";
        // 旋转
        ctx.rotate(radius);
        // 画一条线表示时钟
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -50);
        ctx.stroke();
        // 回到保存的状态
        ctx.restore();
      }

7. In the same way, draw the minute hand:

 function minuteHand(minutes) {
        2 * Math.PI;
        var radius = ((2 * Math.PI) / 60) * minutes;
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.lineCap = "round";
        ctx.strokeStyle = "black";
        ctx.rotate(radius);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -70);
        ctx.stroke();
        ctx.restore();
      }

8. In the same way, draw the second hand:

function secondHand(seconds) {
        var radius = ((2 * Math.PI) / 60) * seconds;
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.lineCap = "round";
        ctx.strokeStyle = "red";
        ctx.rotate(radius);
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -90);
        ctx.stroke();
        ctx.restore();
      }

9. Encapsulate a function to get the current time:

At the same time, all drawn functions are called inside the function. Realize drawing a complete clock.

function update() {
        var time = new Date();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        // 保存canvas状态，因为绘制底盘时它偏移了
        ctx.save();
        drawPanel();
        hourNum();
        secondHand(seconds);
        minuteHand(minutes);
        hourHand(hours, minutes);
        centerDot();
         // 恢复canvas状态
        ctx.restore();
      }
      update();

10. Start the timer and the clock runs:

setInterval(() => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  update();
}, 1000);

3. Summary:

The above is all the content, it is not difficult to implement, it is a reasonable use of some methods provided by canvas, it is very good to use it to practice hands. The source code can be downloaded or copied directly from my gitee repository: https://gitee.com/aurora-in-winter/blog.git

Click to follow to learn about Huawei Cloud's fresh technology for the first time~