用原生 JavaScript 点亮你的指尖：打造炫目光的魔法阵

2023-10-17 01:25:05

在当今信息时代，网络世界中充斥着各种炫酷的交互式效果。其中，光的魔法阵以其令人惊叹的视觉冲击力而备受追捧。它就像是一幅活生生的画卷，将光影的曼妙之美呈现在我们眼前。然而，打造出这样的效果绝非易事，往往需要借助复杂的编程技术。今天，我们就将深入探讨如何运用原生 JavaScript 实现光的魔法阵，让你也能用代码点亮你的指尖。

踏入光的迷宫：实现效果

光的魔法阵是一种基于 JavaScript 的交互式效果，它利用 Canvas 元素绘制出由发光线条构成的圆形阵列。这些线条会随着鼠标的移动而动态变化，形成各种炫目的图案和动画。仿佛是将一束光束化作了指尖上的画笔，在虚拟世界中挥洒出令人着迷的光影之舞。

揭秘魔法背后：步骤分析

要实现光的魔法阵，我们需要分步进行以下操作：

全局定时任务执行： 利用 JavaScript 中的 requestAnimationFrame() 函数，创建全局定时任务，不断地刷新 Canvas 元素上的绘制内容，从而实现动画效果。
绘制内、外圆弧： 使用 Canvas 中的 arc() 方法，绘制出同心内、外圆弧，形成魔法阵的基本框架。
绘制正、反内接三角形： 通过计算内、外圆弧的交点，并结合 Canvas 中的 beginPath()、lineTo() 和 fill() 方法，绘制出交替出现的正、反内接三角形，增添光影效果的丰富性。

代码总览：揭开魔法的奥秘

HTML 部分：

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

这段代码在 HTML 文档中创建了一个 Canvas 元素，作为光的魔法阵的绘制区域。

JS 部分：

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

// 全局定时任务
function animate() {
  // 清除之前的绘制内容
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制内圆弧
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, 2 * Math.PI);
  ctx.stroke();

  // 绘制外圆弧
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, 150, 0, 2 * Math.PI);
  ctx.stroke();

  // 绘制正内接三角形
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, canvas.height / 2 - 100);
  ctx.lineTo(canvas.width / 2 + Math.sqrt(7500) / 2, canvas.height / 2 + 50);
  ctx.lineTo(canvas.width / 2 - Math.sqrt(7500) / 2, canvas.height / 2 + 50);
  ctx.closePath();
  ctx.fill();

  // 绘制反内接三角形
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, canvas.height / 2 - 100);
  ctx.lineTo(canvas.width / 2 + Math.sqrt(7500) / 2, canvas.height / 2 - 50);
  ctx.lineTo(canvas.width / 2 - Math.sqrt(7500) / 2, canvas.height / 2 - 50);
  ctx.closePath();
  ctx.fill();

  // 调用 requestAnimationFrame() 刷新绘制内容
  requestAnimationFrame(animate);
}

// 开始动画
animate();