教你实现一个朴实的Canvas时钟效果

990 阅读2分钟

​​摘要:今天教大家写一个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仓库直接去下载或者复制gitee.com/aurora-in-w…

点击关注,第一时间了解华为云新鲜技术~