canvas css 倒计时

可以使用HTML5的canvas元素和CSS3的动画来实现一个倒计时效果。具体实现步骤如下：

1. 在HTML中创建一个canvas元素，并设置宽高和id属性。

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

2. 在CSS中设置canvas的样式，包括背景色和圆形外边框。

#countdown {
  background-color: #fff;
  border: 2px solid #999;
  border-radius: 50%;
}

3. 在JS中获取canvas元素，计算出倒计时的结束时间，并在每秒钟更新倒计时。

var canvas = document.getElementById('countdown');
var ctx = canvas.getContext('2d');
var endTime = new Date('2021-12-31 23:59:59');

function updateCountdown() {
  var now = new Date();
  var diff = endTime.getTime() - now.getTime();
  var seconds = Math.floor(diff / 1000);
  // 绘制倒计时数字
}

setInterval(updateCountdown, 1000);

4. 在updateCountdown函数中绘制倒计时数字。可以使用canvas的API绘制文本和圆弧。

function updateCountdown() {
  var now = new Date();
  var diff = endTime.getTime() - now.getTime();
  var seconds = Math.floor(diff / 1000);

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制倒计时数字
  ctx.font = '48px Arial';
  ctx.fillStyle = '#999';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(seconds, canvas.width/2, canvas.height/2);

  // 绘制倒计时圆弧
  var percent = seconds / (365 * 24 * 60 * 60);
  var endAngle = percent * 2 * Math.PI - 0.5 * Math.PI;
  ctx.beginPath();
  ctx.arc(canvas.width/2, canvas.height/2, canvas.width/2 - 10, -0.5 * Math.PI, endAngle);
  ctx.strokeStyle = '#999';
  ctx.lineWidth = 10;
  ctx.stroke();
}

这样就可以实现一个简单的canvas倒计时效果了。