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

最新推荐文章于 2026-04-13 07:45:35 发布

原创

最新推荐文章于 2026-04-13 07:45:35 发布 · 1.9k 阅读

标签

#canvas #javascript #动画

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

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

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

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

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

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,this.radius,0,Math.PI*2);
		ctx.fillStyle = this.color;
		ctx.fill();
		//Particle::update();
		//console.log(x);
		//console.log(y);
	},

	update:function(){//更新粒子的坐标与半径

最低0.47元/天解锁文章