Canvas倒计时

Canvas倒计时

前言

用Canvas绘制一个倒计时组件，显示距离新年还有多长时间，精确到秒，该倒计时需要实时更新

基础知识点

JS

Date()

创建一个新Date对象的唯一方法是通过new 操作符，例如：let now = new Date(); 若将它作为常规函数调用（即不加 new 操作符），将返回一个字符串，而非 Date 对象
如果没有输入任何参数，则 Date 的构造器会依据系统设置的当前时间来创建一个 Date 对象。

setInterval()

重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。
它返回一个 interval ID，该 ID 唯一地标识时间间隔，因此你可以稍后通过调用 clearInterval() 来移除定时器。

Canvas API

clearRect()

/**
x:
矩形起点的 x 轴坐标。
y:
矩形起点的 y 轴坐标。
width:
矩形的宽度。
height:
矩形的高度。
*/
ctx.clearRect(x, y, width, height);

clearRect() 方法在一个矩形区域内设置所有像素都是透明的 (rgba(0,0,0,0))。这个矩形范围的左上角在 (x, y)，宽度和高度分别由 width 和height确定

strokeText()

/**
text:
使用当前 font，textAlign，textBaseline和direction 的值对文本进行渲染。
x:
文本起始点的 x 轴坐标。
y:
文本起始点的 y 轴坐标。
maxWidth 可选
需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体（如果通过水平缩放当前的字体，可以进行有效的或者合理可读的处理）或者小号的字体。
*/
ctx.strokeText(text, x, y [, maxWidth]);

在给定的 (x, y) 位置绘制文本的方法。如果提供了表示最大值的第四个参数，文本将会缩放适应宽度。

代码

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

// JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let days = 100;
let hours = 12;
let minutes = 35;
let seconds = 50;
ctx.font = "bold 25px serif";
let interval = setInterval(() => {
    // 每次都要清空canvas，否则字符串会重叠
   ctx.clearRect(0,0,400,300);
   const now = Date.parse(new Date());
   const end = Date.parse(new Date("2025-01-01 00:00:00"));
   const gap = end - now;
  if (gap > 0) {
    days = Math.floor(gap/(1000*60*60*24));
    hours = Math.floor(gap/(1000*60*60)%24);
    minutes = Math.floor(gap/(1000*60)%60);
    seconds = Math.floor(gap/1000%60);
    ctx.strokeText(`${days}天${hours}小时${minutes}分钟${seconds}秒钟`, 50, 100);
  } else {
    clearInterval(interval);
  }
}, 1000);

在线尝试 Codepen

效果