HTML如何制作粒子效果？canvas怎么绘制动态点？-html教程-PHP中文网

实现html canvas粒子效果需先创建canvas标签并获取上下文；2. 定义粒子类，包含位置、颜色、速度等属性及绘制和更新方法；3. 初始化多个粒子并加入数组；4. 使用requestanimationframe创建动画循环，每帧清空画布并更新粒子；5. 优化性能可通过减少粒子数量、避免冗余绘制、简化计算逻辑、使用离屏canvas或web workers；6. 实现交互可监听鼠标事件，根据距离施加吸引力或排斥力；7. 粒子间连接线通过计算距离并绘制透明度随距离变化的线条实现；8. 碰撞检测采用圆形边界判断，满足条件时反转速度模拟反弹；9. 视觉进阶包括使用fillrect或路径绘制自定义形状；10. 应用createlineargradient或createradialgradient实现渐变色填充；11. 使用drawimage方法将预加载的图片作为粒子纹理，提升视觉表现力；最终通过综合运用这些技术，可创建流畅且富有交互性的动态粒子效果，完整实现一个生动的canvas粒子系统。

HTML如何制作粒子效果？canvas怎么绘制动态点？

在HTML中制作粒子效果，尤其是通过Canvas绘制动态点，核心在于利用JavaScript在

<canvas>

登录后复制

元素上进行持续的绘制和更新。说白了，就是在一个二维画布上，不断地画出成百上千个小点（或者其他形状），然后让它们按照一定的规则（比如随机移动、受力、相互作用）动起来，形成一种流动的、有生命力的视觉效果。这不仅仅是技术实现，在我看来，更像是在数字世界里撒下一把有魔力的沙子，看着它们自行演化，充满了惊喜。

解决方案

要实现这种效果，我们通常需要以下几个步骤：

HTML结构准备： 一个简单的
```
<canvas>
```
登录后复制
标签是基础。
```
<canvas id="myCanvas"></canvas>
```
登录后复制

JavaScript核心逻辑： 获取Canvas上下文，定义粒子（Particle）类，创建粒子数组，并编写动画循环。

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

// 动态设置Canvas尺寸，使其铺满窗口
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 监听窗口大小变化，重新调整Canvas尺寸
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    // 尺寸变化后，可能需要重新生成或调整粒子位置
    // 简单起见，这里可以不处理，或清空并重新生成粒子
});

class Particle {
    constructor(x, y, radius, color, velocity) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.velocity = velocity; // { dx, dy }
    }

    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
    }

    update() {
        // 边界检测：如果粒子碰到边缘，反弹
        if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
            this.velocity.dx = -this.velocity.dx;
        }
        if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
            this.velocity.dy = -this.velocity.dy;
        }

        this.x += this.velocity.dx;
        this.y += this.velocity.dy;

        this.draw();
    }
}

let particles = [];
const particleCount = 100; // 粒子数量

// 初始化粒子
for (let i = 0; i < particleCount; i++) {
    const radius = Math.random() * 3 + 1; // 1到4像素
    const x = Math.random() * (canvas.width - radius * 2) + radius;
    const y = Math.random() * (canvas.height - radius * 2) + radius;
    const color = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 0.8 + 0.2})`; // 半透明随机色
    const velocity = {
        dx: (Math.random() - 0.5) * 2, // -1到1
        dy: (Math.random() - 0.5) * 2
    };
    particles.push(new Particle(x, y, radius, color, velocity));
}

// 动画循环
function animate() {
    requestAnimationFrame(animate); // 优化动画性能
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除上一帧内容

    particles.forEach(particle => {
        particle.update();
    });
}

animate();

登录后复制

Canvas粒子效果性能优化：如何避免卡顿与提升流畅度？

我在做Canvas动画时，最头疼的就是性能问题，特别是粒子数量一多，页面立马就卡成PPT。要让Canvas粒子效果跑得流畅，避免卡顿，这几个点是经验之谈：

立即学习“前端免费学习笔记（深入）”；

首先，减少不必要的绘制操作。每次

requestAnimationFrame

登录后复制

回调，我们都会清空整个画布并重绘所有粒子。如果粒子数量庞大，或者粒子形状复杂，这会非常耗费资源。可以考虑减少粒子数量，或者在粒子静止时，不对其进行更新。比如，如果粒子出了屏幕，就把它从数组里移除或者重置，而不是一直计算它的位置。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

其次，优化绘制指令。

ctx.beginPath()

登录后复制

和

ctx.closePath()

登录后复制

在绘制每个粒子时都会调用，这本身就是开销。如果你的粒子都是圆形且没有复杂的路径，可以考虑使用更简单的绘制方式，或者尝试批量绘制。比如，如果所有粒子都是同样大小和颜色的矩形，

ctx.fillRect()

登录后复制

会比

ctx.arc()

登录后复制

更快。对于圆形，虽然

arc

登录后复制

是必须的，但确保每次绘制的指令尽可能少。我有时候会想，能不能把一些粒子先画到一个离屏Canvas上，再整体绘制到主Canvas，这样可以减少主Canvas的绘制次数，但这也引入了额外的内存开销，需要权衡。

再者，控制计算复杂度。每个粒子的

update

登录后复制

方法里，我们都在做位置更新和边界检测。如果粒子之间还有复杂的交互（比如碰撞检测、引力计算），那计算量会呈指数级增长。尽量简化数学模型，避免在每一帧都进行复杂的三角函数或平方根运算。如果粒子数量真的非常多，可以考虑使用Web Workers把计算密集型任务放到后台线程，避免阻塞主线程，这样UI就不会卡顿了。我个人觉得，这是解决大规模粒子系统卡顿的终极方案之一。

最后，利用

requestAnimationFrame

登录后复制

。这个API是浏览器提供的最佳动画循环方式，它会根据浏览器刷新率自动调整，确保动画平滑且省电。不要用

setInterval

登录后复制

，那会带来不必要的性能问题和不稳定的帧率。

实现粒子间的趣味交互：鼠标跟随、连接线与碰撞检测

让粒子不仅仅是随机运动，而是能与用户或者彼此之间产生互动，这会让整个效果变得生动有趣。我之前尝试过几种方式，效果都挺不错的。

鼠标跟随与排斥/吸引： 这是最常见也最直观的交互方式。我们可以在动画循环中获取鼠标的当前坐标，然后计算每个粒子到鼠标的距离。如果粒子在鼠标附近，就给它施加一个力，让它远离鼠标（排斥）或者靠近鼠标（吸引）。这就像在画布上放了一个无形的磁铁。具体实现时，你需要监听

mousemove

登录后复制

事件来获取鼠标位置，然后在每个粒子的

update

登录后复制

方法中，根据与鼠标的距离和预设的“作用力范围”，调整粒子的速度。距离越近，力越大，这样粒子就会有种“活”过来的感觉。

粒子间的连接线： 想象一下，当两个粒子足够近的时候，它们之间会拉出一条线，这就像是它们之间有了某种“看不见的联系”。实现这个，你需要在动画循环里，遍历所有粒子，然后对每一对粒子计算它们之间的距离。如果距离小于某个阈值，就用

ctx.lineTo()

登录后复制

和

ctx.stroke()

登录后复制

在它们之间画一条线。为了让效果更自然，线的透明度可以随着距离的增加而减小，这样远处的线会比较淡，近处的线则更明显。这在视觉上能营造出一种网络或者能量流动的氛围，我个人非常喜欢这种视觉表现力。

简单的碰撞检测与反弹： 让粒子之间能相互碰撞并反弹，这会增加物理世界的真实感。最简单的碰撞检测是基于圆形的，判断两个圆心之间的距离是否小于它们半径之和。如果小于，就说明它们相交了。处理碰撞后的反弹，最简单的方式就是交换或反转它们的速度方向。当然，要模拟真实的弹性碰撞会复杂很多，涉及到动量守恒和能量守恒，但对于大多数粒子效果来说，简单的速度反转就足够了，看起来也会很自然。我通常会给反弹加一点衰减，让它们慢慢停下来，或者能量减弱。