JS绘制微信小程序画布时钟

下面就来详细讲解一下“JS绘制微信小程序画布时钟”的完整攻略，包括代码实现和相关要点说明。

一、实现思路

绘制微信小程序画布时钟，主要依赖canvas画布和javascript语言进行操作。总体的实现思路如下：

在WXML文件中添加一个canvas画布；
在WXSS文件中对canvas画布进行样式设置；
在JS文件中获取canvas画布元素，并进行画布上下文的获取；
设置当前时间，并将时、分、秒等时间数据转换为弧度值；
利用画布上下文进行时钟的绘制，包括表盘、时、分、秒针等部分元素；
使用定时器，每秒钟更新一次时间和针的角度，之后重新绘制即可。

二、示例说明

下面以两条示例说明的方式，详细展示如何实现“JS绘制微信小程序画布时钟”。

示例一

在WXML文件中添加canvas画布：

<canvas id="clock" style="width:100%;height:100%"></canvas>

在WXSS文件中对canvas画布进行样式设置：

#clock {
  background-color: #fff;
}

在JS文件中获取canvas画布元素以及画布的上下文：

const ctx = wx.createCanvasContext('clock');

设置当前时间并获取时、分、秒等时间数据的弧度值：

const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();

const hoursAngle = (hours + minutes / 60) * 30 * Math.PI / 180;
const minutesAngle = minutes * 6 * Math.PI / 180;
const secondsAngle = seconds * 6 * Math.PI / 180;

利用ctx进行画布元素的绘制：

// 绘制表盘
ctx.beginPath();
ctx.arc(150, 150, 100, 0, 2 * Math.PI);
ctx.stroke();

// 绘制时针
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(
  150 + Math.cos(hoursAngle - 90 * Math.PI / 180) * 50,
  150 + Math.sin(hoursAngle - 90 * Math.PI / 180) * 50
);
ctx.stroke();

// 绘制分针
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(
  150 + Math.cos(minutesAngle - 90 * Math.PI / 180) * 70,
  150 + Math.sin(minutesAngle - 90 * Math.PI / 180) * 70
);
ctx.stroke();

// 绘制秒针
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.lineTo(
  150 + Math.cos(secondsAngle - 90 * Math.PI / 180) * 90,
  150 + Math.sin(secondsAngle - 90 * Math.PI / 180) * 90
);
ctx.stroke();

// 绘制表盘中心的圆
ctx.beginPath();
ctx.arc(150, 150, 6, 0, 2 * Math.PI);
ctx.fillStyle = "#333";
ctx.fill();
ctx.stroke();

使用定时器，在每秒钟更新一下当前时间和针的角度，之后重新绘制即可：

setInterval(() => {
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  const hoursAngle = (hours + minutes / 60) * 30 * Math.PI / 180;
  const minutesAngle = minutes * 6 * Math.PI / 180;
  const secondsAngle = seconds * 6 * Math.PI / 180;

  // 清除画布上的内容
  ctx.clearRect(0, 0, 300, 300);

  // 绘制表盘、时、分、秒针
  // 代码略

  // 将画布上下文进行绘制
  ctx.draw();
}, 1000);

示例二

在WXML文件中添加canvas画布：

<canvas canvas-id="clock" style="width: 100%; height: 100%"></canvas>

在WXSS文件中对canvas画布进行样式设置：

#clock {
  background-color: #fff;
}

在JS文件中获取canvas画布元素以及画布的上下文：

const context = wx.createCanvasContext('clock');

设置当前时间并获取时、分、秒等时间数据的弧度值：

const now = new Date();
const hourAngle = (now.getHours() % 12) * 30 * Math.PI / 180 + now.getMinutes() * 0.5 * Math.PI / 180 + now.getSeconds() * 0.0083 * Math.PI / 180;
const minuteAngle = now.getMinutes() * 6 * Math.PI / 180 + now.getSeconds() * 0.1 * Math.PI / 180;
const secondAngle = now.getSeconds() * 6 * Math.PI / 180;

利用context进行画布元素的绘制：

// 绘制表盘
context.setLineWidth(2);
context.setStrokeStyle('#666');
context.arc(150, 150, 100, 0, 2 * Math.PI, true);
context.stroke();

// 绘制时针
context.beginPath();
context.setLineWidth(4);
context.setStrokeStyle('#000');
context.moveTo(150, 150);
context.lineTo(150 + 50 * Math.sin(hourAngle), 150 - 50 * Math.cos(hourAngle));
context.stroke();

// 绘制分针
context.beginPath();
context.setLineWidth(3);
context.setStrokeStyle('#666');
context.moveTo(150, 150);
context.lineTo(150 + 70 * Math.sin(minuteAngle), 150 - 70 * Math.cos(minuteAngle));
context.stroke();

// 绘制秒针
context.beginPath();
context.setFillStyle('#fff');
context.setLineWidth(1);
context.setStrokeStyle('orange');
context.moveTo(150, 150);
context.arc(150, 150, 2.5, 0, 2 * Math.PI, true);
context.fill();
context.beginPath();
context.moveTo(150, 150);
context.lineTo(150 + 90 * Math.sin(secondAngle), 150 - 90 * Math.cos(secondAngle));
context.stroke();
context.beginPath();
context.setFillStyle('orange');
context.arc(150, 150, 1.5, 0, 2 * Math.PI, true);
context.fill();

// 绘制表盘中心的小圆
context.beginPath();
context.arc(150, 150, 3, 0, 2 * Math.PI, true);
context.setFillStyle('#fff');
context.fill();
context.stroke();

使用定时器，在每秒钟更新一下当前时间和针的角度，之后重新绘制即可：

setInterval(() => {
  const now = new Date();
  const hourAngle = (now.getHours() % 12) * 30 * Math.PI / 180 + now.getMinutes() * 0.5 * Math.PI / 180 + now.getSeconds() * 0.0083 * Math.PI / 180;
  const minuteAngle = now.getMinutes() * 6 * Math.PI / 180 + now.getSeconds() * 0.1 * Math.PI / 180;
  const secondAngle = now.getSeconds() * 6 * Math.PI / 180;

  // 清空画布
  context.clearRect(0, 0, 300, 300);

  // 绘制表盘、时针、分针和秒针
  // 代码略

  // 重新绘制画布
  context.draw();
}, 1000);