js学习—在canvas画布上的粒子扩散

最新推荐文章于 2025-04-05 12:14:54 发布

natural_live

最新推荐文章于 2025-04-05 12:14:54 发布

阅读量1.9k

点赞数 3

分类专栏： JS学习文章标签： canvas javascript 动画

本文链接：https://blog.youkuaiyun.com/natural_live/article/details/76358332

版权

这篇博客探讨了如何在HTML5 canvas上利用javascript实现粒子扩散动画。通过监听鼠标移动事件，结合requestAnimationFrame实现平滑动画效果。采用面向对象的方式，定义粒子的属性如坐标、半径、颜色及运动轨迹。尽管目前存在颜色选择有限、高光效果未能实现以及随机角度移动的挑战，代码已分享供进一步研究和改进。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次内容是在看完腾讯课堂的公开课后，结合笔记，自己在电脑上实现的效果(所以有些代码部分可能类似)。

要实现的效果：鼠标移动时，产生颜色大小不同的粒子，粒子移动直至消失。

做出来的效果和和我想要的效果不太一样，还是有些问题。接下来我们还是分析一下。

首先我们很明显的要写一个鼠标移动事件：

canvas.addEventListener('mousemove',create,false);//监听鼠标移动事件

create是鼠标移动后要做的事。

然后我们要做动画，这里采用的是requestAnimationFrame（）。这是一个类似于setInterval的函数，区别在于requestAnimationFrame是不间隔执行的。

要产生粒子，即要在canvas上画圆。因为每个圆都有它的坐标，半径，颜色，还有它的运动，所以我们采用面向对象来做，如下：

function Particle(){//创建对象
	
}

Particle.prototype = {//实例化对象
	init:function(x,y,radius){
		this.x = x || 0.0;
		this.y = y || 0.0;
		this.radius = radius || 10;
		this.color = colors[random(0,7)];
	},

	draw:function(){//绘制一个粒子
		ctx.beginPath();
		ctx.arc(this.x,this.y

最低0.47元/天解锁文章