Canvas点连线经典特效制作指南：点亮你的创意之旅

前端

2023-08-15 09:34:22

Canvas 点连线特效：让你的网站栩栩如生

简介

在数字化浪潮中，视觉效果扮演着至关重要的角色，它能吸引受众并留下深刻印象。点连线特效凭借其赏心悦目的互动性，在网页设计、游戏开发等领域备受追捧。本文将带领你深入探索 Canvas 点连线特效的魅力，一步步手把手教你打造专属的特效。

第一步：准备就绪

踏上点连线特效之旅，你需要准备好以下武器库：

HTML 和 CSS
画图软件 (如 Adobe Illustrator 或 Sketch)
代码编辑器
浏览器

第二步：创建 Canvas 画布

在 HTML 文件中，添加一个 <canvas> 元素，设置其宽度和高度，定义绘画区域的大小。

<canvas id="myCanvas" width="500" height="500"></canvas>

第三步：获取 Canvas 上下文

使用 getContext() 方法获取 <canvas> 元素的上下文，它提供了绘制线条、矩形和圆形等图形的强大工具。

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

第四步：构建点阵

创建一个二进制二维数组，表示点阵，其中的每个元素设置为 0 或 1，表示点的存在或缺失。

const dotArray = [
  [0, 0, 1, 0, 0],
  [0, 1, 1, 1, 0],
  [1, 1, 1, 1, 1],
  [0, 1, 1, 1, 0],
  [0, 0, 1, 0, 0],
];

第五步：绘制点阵

使用 fillRect() 方法绘制每个点，并用 fillStyle 属性设置其颜色。

for (let i = 0; i < dotArray.length; i++) {
  for (let j = 0; j < dotArray[i].length; j++) {
    if (dotArray[i][j] === 1) {
      ctx.fillStyle = "#000";
      ctx.fillRect(j * 10, i * 10, 10, 10);
    }
  }
}

第六步：连接点

连接点是点连线特效的精髓。

ctx.beginPath();
ctx.moveTo(5, 5); // 从第一个点开始
for (let i = 0; i < dotArray.length; i++) {
  for (let j = 0; j < dotArray[i].length; j++) {
    if (dotArray[i][j] === 1) {
      ctx.lineTo(j * 10 + 5, i * 10 + 5); // 连接每个点的中心
    }
  }
}
ctx.strokeStyle = "#fff"; // 设置线框颜色
ctx.stroke(); // 绘制线框

第七步：添加交互性

为 <canvas> 元素添加事件监听器，让用户能够动态地与点连线特效互动。

canvas.addEventListener("mousemove", (e) => {
  // 获取鼠标位置
  const mouseX = e.clientX;
  const mouseY = e.clientY;
  // 将鼠标位置转换为点阵坐标
  const dotX = Math.floor(mouseX / 10);
  const dotY = Math.floor(mouseY / 10);
  // 如果鼠标在某个点范围内，标记该点为选中状态
  if (dotX >= 0 && dotX < dotArray.length && dotY >= 0 && dotY < dotArray[0].length) {
    dotArray[dotY][dotX] = 1;
  }
  // 重新绘制点阵和连接线
  drawDotArray();
});