canvas是HTMl5中的重要标签之一，它可以在浏览器中绘制图形。canvas标签需要指定一个宽度和高度。

本文将包括以下内容：

准备canvas绘制时钟外框绘制刻度绘制时针、分针和秒针更新时钟1、准备canvas

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

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

我们首先获取到canvas元素，然后使用 getContext方法 获取2D上下文，从而可以控制canvas。

2、绘制时钟外框

// 绘制时钟外框function drawBorder(){    ctx.beginPath(); //开始绘制路径      ctx.arc(100, 100, 90, 0, Math.PI * 2); //绘制圆形      ctx.strokeStyle = 'black'; //设置颜色      ctx.lineWidth = 5; //设置线条宽度      ctx.stroke(); //绘制路径  }

这个代码块中，我们使用 beginPath()方法 开始绘制，然后使用arc()方法绘制圆形。圆心的坐标为(100, 100)，半径为90像素。我们还使用strokeStyle属性设置颜色，使用lineWidth属性设置线条宽度，并最终使用stroke()方法绘制。

3、绘制刻度

//绘制刻度function drawTicks() {  for (var i = 0; i < 60; i++) {    ctx.beginPath(); //开始绘制路径    ctx.lineWidth = (i%5 == 0) ? 5 : 2; //设置线条宽度    ctx.strokeStyle = (i%5 == 0) ? '#e2e2e2' : '#f2f2f2'; //设置颜色    var angle = (i/60) * (2*Math.PI); //计算角度    var x = 100 + Math.cos(angle) * 80; //计算X坐标    var y = 100 + Math.sin(angle) * 80; //计算Y坐标    ctx.moveTo(x, y); //移动到刻度点    ctx.lineTo(100, 100); //向圆心连线    ctx.stroke(); //绘制路径  }}

这个代码块中，我们使用for循环来绘制60个刻度。在每个迭代中，我们设置线条宽度和颜色，然后计算出刻度点的坐标，并使用moveTo()方法移动到该点。接下来，我们使用lineTo()方法将该点与圆心连线，并使用stroke()方法绘制路径。

4、绘制时针、分针和秒针

//绘制指针function drawHands() {  var now = new Date(); //获取当前时间  var hour = now.getHours(); //获取小时  var minute = now.getMinutes(); //获取分钟  var second = now.getSeconds(); //获取秒钟  var hourAngle = (hour/12) * (Math.PI*2) - (Math.PI/2); //计算时针角度  var minuteAngle = (minute/60) * (Math.PI*2) - (Math.PI/2); //计算分针角度  var secondAngle = (second/60) * (Math.PI*2) - (Math.PI/2); //计算秒针角度    //绘制时针  ctx.beginPath(); //开始绘制路径  ctx.lineWidth = 8; //设置线条宽度  ctx.strokeStyle = 'black'; //设置颜色  ctx.moveTo(100, 100); //移动到圆心  ctx.lineTo(100 + Math.cos(hourAngle) * 60, 100 + Math.sin(hourAngle) * 60); //绘制路径  ctx.stroke(); //绘制路径    //绘制分针  ctx.beginPath(); //开始绘制路径  ctx.lineWidth = 5; //设置线条宽度  ctx.strokeStyle = 'black'; //设置颜色  ctx.moveTo(100, 100); //移动到圆心  ctx.lineTo(100 + Math.cos(minuteAngle) * 80, 100 + Math.sin(minuteAngle) * 80); //绘制路径  ctx.stroke(); //绘制路径    //绘制秒针  ctx.beginPath(); //开始绘制路径  ctx.lineWidth = 2; //设置线条宽度  ctx.strokeStyle = 'red'; //设置颜色  ctx.moveTo(100, 100); //移动到圆心  ctx.lineTo(100 + Math.cos(secondAngle) * 90, 100 + Math.sin(secondAngle) * 90); //绘制路径  ctx.stroke(); //绘制路径    //绘制圆心  ctx.beginPath(); //开始绘制路径  ctx.arc(100, 100, 5, 0, Math.PI * 2); //绘制圆形  ctx.fillStyle = 'black'; //设置填充色  ctx.fill(); //填充路径}

在这个代码块中，我们首先获取当前的时间，然后计算时针、分针和秒针的角度。我们使用beginPath()方法开始绘制路径，然后使用moveTo()方法移动到圆心。使用lineTo()方法绘制指针，并使用stroke()方法绘制路径。最后，我们使用arc()方法绘制圆心，并使用fill()方法填充路径。

5、更新时钟

setInterval(function() {  ctx.clearRect(0, 0, canvas.width, canvas.height); //清空画布  drawBorder(); //绘制时钟外框  drawTicks(); //绘制刻度  drawHands(); //绘制指针}, 1000);

在这个代码块中，我们使用clearRect()方法清空画布，让我们可以重新绘制指针。然后，每秒钟调用drawBorder、drawTicks、drawHands函数，以重新绘制时钟。

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，我们一起加油吧。