c语言编程笔录

首页 >   > 笔记大全

笔记大全

canvas的实例 时钟动画

更新时间：2023-10-31

前言

HTML5中提供了Canvas API，使得我们能够使用纯javascript代码绘制各种图形，包括动画。本文将介绍如何使用Canvas API制作一个简单的时钟动画。

第一段

首先，需要先在HTML中添加一个canvas元素，并通过css样式指定它的大小和位置：
接下来，需要获取canvas元素的上下文，使用canvas.getContext()方法可以获取canvas渲染上下文。而在这里我们要使用2d上下文，所以传入参数"2d"： 
const canvas = document.getElementById("clock");
const ctx = canvas.getContext("2d");
然后，我们需要设置画布的位置和大小，以及圆形的边框。这里我们选择把圆心设置在canvas元素的中心，并用半径为canvas的宽度的一半来绘制： 
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = canvas.width / 2 - 5;

// 绘制圆形
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.strokeStyle = "#333";
ctx.lineWidth = 2;
ctx.stroke();

第二段

现在，我们开始绘制时钟的刻度。一般来说，钟表上有12个小时数字，但这里我们只需要绘制小时的刻度，一共12根刻度。因此，我们可以使用一个循环，从1到12依次绘制刻度。具体的操作是，通过angles变量来计算每次移动的弧度，然后利用cos和sin函数来计算每根刻度在圆上的坐标： 
for(let i = 0; i < 12; i++) {
  let angle = i * Math.PI / 6;
  let x = centerX + Math.cos(angle) * (radius - 15);
  let y = centerY + Math.sin(angle) * (radius - 15);

  ctx.beginPath();
  ctx.arc(x, y, 2, 0, 2 * Math.PI);
  ctx.fillStyle = "#333";
  ctx.fill();
}
这段代码会在时钟的圆形边缘绘制出12个小圆点，作为小时刻度。

第三段

接下来，我们需要绘制时钟的指针。时钟一般由时针、分针和秒针组成，因此我们需要分别绘制这三个指针。我们可以通过获取当前时间，计算时针、分针和秒针在圆上的坐标而绘制出来。具体的操作是，获取当前时间，然后计算出每个指针在圆上的坐标，绘制时针和分针需要绘制一个有长度和角度的线段，而绘制秒针只需要绘制一个小圆点即可： 
function drawHourHand() {
  let date = new Date();
  let hour = date.getHours();
  let minute = date.getMinutes();

  ctx.beginPath();
  ctx.lineWidth = 6;
  ctx.lineCap = "round";
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(centerX + Math.cos(hour * (Math.PI / 6) + minute * (Math.PI / 360)) * (radius - 50), centerY + Math.sin(hour * (Math.PI / 6) + minute * (Math.PI / 360)) * (radius - 50));
  ctx.strokeStyle = "#333";
  ctx.stroke();
}

function drawMinuteHand() {
  let date = new Date();
  let minute = date.getMinutes();
  let second = date.getSeconds();

  ctx.beginPath();
  ctx.lineWidth = 4;
  ctx.lineCap = "round";
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(centerX + Math.cos(minute * (Math.PI / 30) + second * (Math.PI / 1800)) * (radius - 30), centerY + Math.sin(minute * (Math.PI / 30) + second * (Math.PI / 1800)) * (radius - 30));
  ctx.strokeStyle = "rgba(0, 0, 0, 0.7)";
  ctx.stroke();
}

function drawSecondHand() {
  let date = new Date();
  let second = date.getSeconds();

  ctx.beginPath();
  ctx.arc(centerX, centerY, 4, 0, 2 * Math.PI);
  ctx.fillStyle = "red";
  ctx.fill();

  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(centerX + Math.cos(second * (Math.PI / 30)) * (radius - 10), centerY + Math.sin(second * (Math.PI / 30)) * (radius - 10));
  ctx.lineWidth = 2;
  ctx.lineCap = "round";
  ctx.strokeStyle = "red";
  ctx.stroke();
}

第四段

最后，我们需要用setInterval()函数来不断刷新画布，完成动画效果。具体的操作是，每1000毫秒调用一次updateClock()函数，该函数会清空画布，然后重新绘制整个时钟： 
function updateClock() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawHourHand();
  drawMinuteHand();
  drawSecondHand();
}

setInterval(updateClock, 1000);
这段代码会每秒钟更新一次时钟指针的位置，从而呈现出一个不断转动的动画效果。

总结

本文介绍了如何使用Canvas API制作一个简单的时钟动画。用户可以通过获取canvas元素的上下文，设置画布样式，绘制圆形和刻度，绘制时钟指针等来完成时钟的绘制。而利用setInterval()函数不断刷新画布，就可以呈现出一个可以动的时钟动画效果。

图文推荐