canvas 实现倒计时三秒钟

以下是使用 canvas 实现三秒钟倒计时的示例代码：

HTML:

<canvas id="countdown" width="200" height="200"></canvas>

JavaScript:

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

var count = 3; // 倒计时秒数
var angle = 0; // 扇形角度
var radius = 80; // 扇形半径
var centerX = canvas.width / 2; // 中心点 X 坐标
var centerY = canvas.height / 2; // 中心点 Y 坐标
var font = "60px Arial"; // 字体

// 开始倒计时
var countdownInterval = setInterval(function() {
  angle = (360 / count) * Math.PI / 180; // 计算扇形角度
  context.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  context.beginPath();
  context.moveTo(centerX, centerY); // 从中心点开始绘制扇形
  context.arc(centerX, centerY, radius, 0, angle, false); // 绘制扇形
  context.closePath();
  context.fillStyle = "#FF0000"; // 设置扇形颜色
  context.fill(); // 填充扇形
  context.font = font; // 设置字体
  context.fillStyle = "#000000"; // 设置字体颜色
  context.fillText(count, centerX - 30, centerY + 20); // 绘制倒计时数字
  count--; // 倒计时减1
  if (count < 0) { // 倒计时结束
    clearInterval(countdownInterval); // 停止倒计时
    context.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    context.font = font; // 设置字体
    context.fillStyle = "#000000"; // 设置字体颜色
    context.fillText("GO!", centerX - 50, centerY + 20); // 绘制 GO!
  }
}, 1000); // 每隔1秒执行一次

以上代码会在画布中绘制一个红色的扇形和倒计时数字，每隔1秒更新一次数字和扇形角度，直到倒计时结束后绘制 "GO!" 字符串。您可以根据自己的需要修改颜色、字体、大小和倒计时秒数等参数。