JavaScript canvas实现动态点线效果

2023年6月11日上午12:54 • JavaScript

下面就是详细讲解 JavaScript canvas 实现动态点线效果的完整攻略。

简介

Canvas 是 HTML5 中一个非常重要的特性，它可以用 JavaScript 来绘制图像，包括各种形状、文本、图片以及动画等。我们可以通过 Canvas 实现各种炫酷的效果，其中动态点线效果就是其中的一种。

实现过程

1. 构建 Canvas 环境

首先，我们需要准备一个 HTML 页面，然后在页面上加上一个 Canvas 元素：

<canvas id="myCanvas"></canvas>

接着，在 JavaScript 中获取这个 Canvas 元素，并创建一个 CanvasRenderingContext2D 对象：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

2. 绘制点和线

我们可以使用 CanvasRenderingContext2D 的 fillRect 方法来绘制点：

ctx.fillStyle = 'white';
ctx.fillRect(x, y, 1, 1);

其中，x 和 y 分别表示点的坐标。

我们也可以使用 CanvasRenderingContext2D 的 moveTo 和 lineTo 方法来绘制线：

ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = 'white';
ctx.stroke();

其中，x1 和 y1 是线的起点，x2 和 y2 是线的终点。

3. 创建动画效果

接下来，我们需要创建动画效果，让点和线不停地运动。我们可以使用 requestAnimationFrame 方法来实现动画。在每一帧中，我们需要清空 Canvas 并重新绘制所有的点和线：

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 绘制所有的点和线
  requestAnimationFrame(update);
}
requestAnimationFrame(update);

然后，我们需要在每一帧中更新点和线的位置。这里我们可以使用一些数学函数来计算点和线的位置。

以绘制一个圆圈为例，我们可以使用以下代码：

let t = 0;
function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const x = Math.cos(t) * r + centerX;
  const y = Math.sin(t) * r + centerY;
  ctx.fillStyle = 'white';
  ctx.fillRect(x, y, 1, 1);
  t += 0.1;
  requestAnimationFrame(update);
}
requestAnimationFrame(update);

其中，r 是圆的半径，centerX 和 centerY 是圆的中心坐标，t 是一个旋转角度，每一帧增加一定的值。

4. 示例说明

以下是两个示例，一个绘制了一个圆圈，另一个绘制了一个线条，并在线条上加入了一些点。代码中包含了详细的注释。

绘制一个圆圈

HTML 代码：

<canvas id="myCanvas"></canvas>

JavaScript 代码：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const r = 50; // 圆的半径
const centerX = canvas.width / 2; // 圆的横坐标
const centerY = canvas.height / 2; // 圆的纵坐标
let t = 0; // 旋转角度

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 计算点的坐标并绘制
  const x = Math.cos(t) * r + centerX;
  const y = Math.sin(t) * r + centerY;
  ctx.fillStyle = 'white';
  ctx.fillRect(x, y, 1, 1);

  // 增加旋转角度
  t += 0.1;

  // 递归调用自己，实现动画效果
  requestAnimationFrame(update);
}

// 启动动画
requestAnimationFrame(update);

绘制一个线条

HTML 代码：

<canvas id="myCanvas"></canvas>

JavaScript 代码：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const points = []; // 所有的点的数组

// 生成随机的点，并保存到 points 数组中
for (let i = 0; i < 100; i++) {
  const x = Math.random() * canvas.width;
  const y = Math.random() * canvas.height;
  points.push({ x, y });
}

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制所有的点
  ctx.fillStyle = 'white';
  points.forEach(point => {
    ctx.fillRect(point.x, point.y, 1, 1);
  });

  // 绘制所有的线
  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  for (let i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y);
  }
  ctx.strokeStyle = 'white';
  ctx.stroke();

  // 在线条上加入一些随机的点
  for (let i = 0; i < 10; i++) {
    const index = Math.floor(Math.random() * points.length);
    const { x, y } = points[index];
    ctx.fillRect(x, y, 1, 1);
  }

  // 递归调用自己，实现动画效果
  requestAnimationFrame(update);
}

// 启动动画
requestAnimationFrame(update);