HTML5 Canvas：跟随鼠标的动态小圆特效实现

"html+css+js实现canvas跟随鼠标的小圆特效源码，创建了一个动态的视觉效果，小圆点在canvas上根据鼠标位置移动。" 本示例代码旨在利用HTML5的Canvas API创建一个交互式的网页特效，其中小圆点会跟随鼠标的移动轨迹在页面上动态显示。这个效果主要通过JavaScript实现，结合HTML结构和CSS样式完成。以下是详细的知识点解析： 1. **HTML 结构**： - `<canvas>` 标签：HTML5 提供的用于图形绘制的元素，可以通过 JavaScript 的 Canvas API 进行绘图操作。 - `<h1>` 标签：用于设置页面的主标题，此处用于显示“北极光之夜”。 - `id` 属性：为元素设置唯一标识，便于 JavaScript 通过 `document.querySelector()` 或 `getElementById()` 获取。 2. **CSS 样式**： - `position: absolute;`：使元素相对于最近的非 static 定位祖先元素定位。 - `top` 和 `left` 属性结合 `transform: translate(-50%, -50%)` 实现元素水平垂直居中。 - `font-size`, `font-family`, `color` 用于设置文本的字体大小、字体类型和颜色。 3. **JavaScript 部分**： - `var canvas = document.querySelector("#draw");`：获取带有 `id` 为 "draw" 的 `<canvas>` 元素。 - `var yuan = canvas.getContext("2d");`：获取 2D 渲染上下文，用于在canvas上进行绘图。 - `window.onresize` 事件：当浏览器窗口大小改变时，调用 `resizeCanvas` 函数，确保canvas始终铺满浏览器可视区。 - `resizeCanvas` 函数：调整canvas的宽度和高度与窗口大小保持一致。 - `arr` 数组：存储小圆对象，用于保存每个小圆的属性（位置、半径、颜色和移动方向）。 - `circle` 函数：创建小圆对象并初始化其属性，包括随机颜色、随机移动方向。 - `window.onmousemove` 事件：监听鼠标移动，触发绘制小圆的逻辑。 4. **Canvas API**： - `fillStyle`：设置填充颜色。 - `beginPath()`：开始一条路径。 - `arc()`：绘制圆弧，参数分别为圆心 x 坐标、圆心 y 坐标、半径、起始角度、结束角度以及是否逆时针绘制。 - `fill()`：填充路径。 - `clearRect()`：清除指定矩形区域内的内容，通常用于擦除之前绘制的图形，以便重新绘制。 5. **动画实现**： - 使用 `requestAnimationFrame` 实现动画效果，每次重绘前清除canvas，然后根据小圆的移动更新位置并重绘，形成动态跟随的效果。 6. **性能优化**： - 当鼠标移出canvas时，停止 `requestAnimationFrame`，节省计算资源。 通过以上步骤，一个交互式的、跟随鼠标的canvas小圆特效就实现了。这个例子展示了HTML5、CSS3和JavaScript的组合应用，以及如何利用Canvas API进行动态图形渲染和事件处理。