Canvas绘制老友记时钟

前言

一直做3D/2D可视化，Canvas API和三角函数，空间几何是基础。在官网上看了一遍Canvas API之后，决定绘制一个老友记时钟来巩固知识点，本文用实际代码讲解绘制过程。

代码

HTML

<canvas id="myCanvas" width="300" height="300"></canvas>

Javascript

const canvas = document.getElementById("myCanvas");
const bgImage = new Image();
const ctx = canvas.getContext("2d");

bgImage.src = "https://thumbnail1.baidupcs.com/thumbnail/cc3e81310m71ea6cdb2c5755bda0dc0c?fid=1099650259173-250528-406088947420032&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-VVyEw%2bgld39Yr5Tjp%2f1KbwKqa4M%3d&expires=8h&chkbd=0&chkv=0&dp-logid=409019635711974061&dp-callid=0&time=1718445600&size=c1512_u982&quality=90&vuk=1099650259173&ft=image&autopolicy=1";

// 时钟半径
const r = 100

bgImage.onload = function () {
  render();
  setInterval(function(){
    render();
  }, 1000);
  
  // 每一帧都先用canvas.clearRect(x,y,w,h)擦掉画布上的像素，否则会造成当前像素和之前的像素叠加的问题。将画布的原点移到画布的中心，有助于绘制刻度和以中心为基点旋转的指针，在之前得保存平移之前的环境状态。
  function render() {
    drawClockBackGround();
    drawHourTicks();
    drawTime();
    ctx.restore();
  }
  
  // 时针、分针、秒针的做法是一致的，使用canvas.rotate()绕原点旋转，旋转之前都要canvas.save()保存当前状态（指针的每一帧动作都是让画布旋转特定的角度，所以画完一次要摆正一次画布，否则秒针旋转一次，分针会在此基础上旋转）
  function drawTime(){
    var now = new Date();
    h = now.getHours();
    m = now.getMinutes();
    s = now.getSeconds();
    
    ctx.strokeStyle = 'black';
    
    drawHour(h,m);
    drawMinute(m,s);
    drawSecond(s);
  }
  
  function drawHour(h, m) {
    const hour = h + m/60;
    ctx.save();
    ctx.beginPath();
    ctx.rotate(hour * 2 * Math.PI / 12); // 时针旋转一周是12小时
    ctx.lineWidth = 4;
    ctx.moveTo(0, 0.2 * 0.4 * r);
    ctx.lineTo(0, -0.8 * 0.4 * r);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
  }
  
  function drawMinute(m, s) {
    const minute = m + s/60;
    ctx.save();
    ctx.beginPath();
    ctx.rotate(minute * 2 * Math.PI / 60); // 分针旋转一周是60分钟
    ctx.lineWidth = 2;
    ctx.moveTo(0, 0.2 * 0.6 * r);
    ctx.lineTo(0, -0.8 * 0.6 * r);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
  }
  
  function drawSecond(s) {
    ctx.save();
    ctx.beginPath();
    ctx.rotate(s * 2 * Math.PI / 60); // 秒针旋转一周是60秒
    ctx.lineWidth = 2;
    ctx.moveTo(0, 0.2 * 0.8 * r);
    ctx.lineTo(0, -0.8 * 0.8 * r);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
  }
  
  function drawHourTicks() {
    const hourTickLength = 5; // 刻度的长度
    const hourTickColor = "yellow";
    const gap = 10; // 刻度起始位置距离表盘边缘的间隔
    for (let i = 0; i * Math.PI / 6 < 2 * Math.PI; i ++) {
      const angle = i * Math.PI / 6;
      ctx.beginPath();
      ctx.moveTo((r - gap) * Math.cos(angle), (r - gap) * Math.sin(angle));
      ctx.lineTo((r - gap + hourTickLength) * Math.cos(angle), (r - gap + hourTickLength) * Math.sin(angle));
      ctx.strokeStyle = hourTickColor;
      ctx.stroke();
      ctx.closePath();
    }
  }
  
  function drawClockBackGround() {
    // 清除canvas  
    ctx.clearRect(0, 0, canvas.width, canvas.height);  
    ctx.save();
    
    // 将坐标系原点平移到画布中心位置
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // 绘制圆形遮罩（实际上绘制一个圆形，并用白色填充）  
    ctx.beginPath();
    ctx.arc(0, 0, r, 0, Math.PI * 2);
    ctx.closePath();
    
    // 表盘背景图片
    drawBGImage();
    
    // 指针交汇处的圆形
    ctx.beginPath();
    ctx.fillStyle = 'black';
    ctx.arc(0, 0, 5, 0, Math.PI * 2, false);
    ctx.fill();
    ctx.closePath();
    
    // 描边表盘轮廓
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.arc(0, 0, r, 0, Math.PI * 2);
    ctx.strokeStyle = 'black';  
    ctx.stroke();
    ctx.closePath();
    
  }
  
  function drawBGImage() {
    ctx.fillStyle = 'white'; // 遮罩颜色，通常与背景色相同  
    ctx.fill();  

    // 设置globalCompositeOperation为'source-in'，这样接下来的绘制只会在遮罩区域内显示  
    ctx.globalCompositeOperation = 'source-in';  

    // 绘制背景图片，它现在只会在圆形区域内显示
    const scale = 1;  
    const scaledWidth = bgImage.width * scale;  
    const scaledHeight = bgImage.height * scale;  
    ctx.drawImage(bgImage, 0, 0, scaledWidth, scaledHeight, - canvas.width / 2, - canvas.height / 2, canvas.width, canvas.height);
    // 重置globalCompositeOperation以便后续绘制不受影响  
    ctx.globalCompositeOperation = 'source-over';
  }  
};

效果

链接

在线演练请参考： CodePen