关于canvas:教你实现一个朴实的Canvas时钟效果

摘要： 明天教大家写一个 canvas 的时钟案例，成果可能看起来比较简单，没有那些花里胡哨的。

本文分享自华为云社区《如何实现一个朴实无华的 Canvas 时钟成果》，作者：北极光之夜。。

一. 先看成果：

明天写一个 canvas 的时钟案例。成果可能看起来比较简单，没有那些花里胡哨的，不过，它波及的 canvas 知识点是比拟多的，初学 canvas 那是必然要会的。上面手把手带你疾速实现~

二. 实现步骤（源码在最初）：

1. 设置根本的标签与款式：

 <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. 开始 js 代码实现，上面为了易于了解，所以一个性能封装一个函数：

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

3. 先绘制钟的整体红色底盘：

同时为了前期将旋转点为.clock 的核心的，所以将 translate 偏移一半的间隔。

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

4. 绘制时钟的 12 位数字：

可知，一个圆上它的 x 坐标为：R cos（它的角度），y 坐标为：R sin（它的角度）。
同时，因为 Math.cos（）与 Math.sin（）里是计算弧度的，所以要转换。公式：弧度 = 角度 * π / 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. 绘制时钟核心的圆点：

一个灰圆笼罩一个稍大的黑圆。

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. 绘制时针：

假如参数 hours 与 minutes 为传入的以后的工夫的小时数与分钟数。

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. 同理，绘制分针：

 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. 同理，绘制秒针：

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. 封装一个函数获取以后工夫：

同时函数外部调用全副绘制的函数。实现绘制一个残缺的时钟。

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. 开启定时器，时钟运行：

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

三. 总结：

下面就是全部内容了，实现并不难，就是对 canvas 提供的一些办法进行正当的应用，拿来练手是很不错的。源码在我的 gitee 仓库间接去下载或者复制获取👉：https://gitee.com/aurora-in-w…

点击关注，第一工夫理解华为云陈腐技术~