通过动态设置hue的值，改变圆的填充样式，就可以实现颜色渐变的粒子的粒子了，效果如开头第二幅动画。
在上面的基础上，还可以玩出新的花样，比如这样改动：
function animate() { // ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.fillRect(0, 0, canvas.width, canvas.height); hue++; handleParticles(); requestAnimationFrame(animate); }
现在我们的粒子就有拖尾的效果了，就是文章开头的第三张动画，这里其实是通过整个画布透明度的叠加，让上一次的绘画效果变淡，最后隐藏起来了，从视觉效果上看就是渐变拖尾，到目前为止效果越来越有味了，但是代码还是很少喔。
5.连接的粒子最后呢我们要实现粒子与粒子之间的连线，就是文章开头的第四幅动画效果，那么在前面的基础上，加上绘制两个圆之间的直线即可，当然这里要获取两个圆心的距离，然后进行绘制，这里涉及到handleParticles函数的改造，其他不变；
function handleParticles() { for (let i = 0; i < particlesArray.length; i++) { particlesArray[i].update(); particlesArray[i].draw(); // 从当前粒子开始，往后遍历后面的粒子，依次计算与之对应的距离 for (let j = i + 1; j < particlesArray.length; j++) { const dx = particlesArray[i].x - particlesArray[j].x; const dy = particlesArray[i].y - particlesArray[j].y; const distance = Math.sqrt(dx * dx + dy * dy); // 初中知识 if (distance < 100) { // 距离太大舍弃，否则视觉效果不好 // 绘制直线 ctx.beginPath(); ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; ctx.moveTo(particlesArray[i].x, particlesArray[i].y); ctx.lineTo(particlesArray[j].x, particlesArray[j].y); ctx.stroke(); ctx.closePath(); } } if (particlesArray[i].size <= 0.3) { particlesArray.splice(i, 1); i--; } } }
通过添加一个循环加直线绘制，效果就实现了，看起来还是很不错的，到这里基本是跟着作者走完一遍了，代码量不大，但是效果很不错，更重要的是对canvas的学习热情又起来了。
总结到此这篇教你用几十行js实现很炫的canvas交互特效的文章就介绍到这了,更多相关js实现canvas交互特效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: