canvas放射粒子效果

这个也是别人的代码，就不多介绍了

写了些注释

body {overflow:hidden;margin:0;padding:0;background-color:#222222
}
</style>
</head>
<body>
<canvas id="canvasParticle">Canvas is not supported in your brower.</canvas><script>
window.onload = function() {var oCanvas = document.getElementById('canvasParticle');var cxt = null;//用来存放粒子的素组var particles = {};var particleIndex = 0;if (oCanvas.getContext) {cxt = oCanvas.getContext('2d');}oCanvas.width = window.innerWidth;oCanvas.height = window.innerHeight;function Particle() {particleIndex++;particles[particleIndex] = this;//粒子放射的中心点this.x = oCanvas.width / 2;this.y = oCanvas.height / 2;//初始化粒子沿X轴和Y轴的速度this.vx = Math.random() * 6 - 3;this.vy = Math.random() * 4 - 2;this.growth = (Math.abs(this.vx) + Math.abs(this.vy)) * 0.01; // 根据x/y轴的位置决定大小this.id = particleIndex;this.size = 0;this.color = getRandomColor();};Particle.prototype.draw = function() {this.x += this.vx;this.y += this.vy;//根据移动的距离逐渐变大this.size += this.growth;if (this.x < 0 || this.x > oCanvas.width || this.y < 0 || this.y > oCanvas.height) {//出界则移除delete particles[this.id];}cxt.fillStyle = this.color;cxt.beginPath();cxt.arc(this.x, this.y, this.size, 0, 2 * Math.PI);cxt.fill();};function animate() {requestAnimationFrame(animate);cxt.fillStyle = '#222222';cxt.fillRect(0, 0, oCanvas.width, oCanvas.height);//每次网数组添加一个数据new Particle();//遍历数组，依次画出for (var i in particles) {particles[i].draw();}};requestAnimationFrame(animate);
};//随机颜色方法
function getRandomColor() {return '#' + (Math.random() * 0xffffff << 0).toString(16);};</script>
</body>

转载于:https://www.cnblogs.com/anxiaoyu/p/6866037.html

canvas放射粒子效果相关推荐

canvas文字粒子效果 html+css+js 3点饮茶，7点放工，美滋滋~
先言: 今天3点多在饮茶的时候,发现有好几天没水文章了,但是太难的玩意又不会啊,咋办,突然想起电脑里还有存着一个文字粒子特效,好家伙,这不就来了,先看效果如下: 因为gif图最大5m,但是这东西演示 ...
canvas动画粒子效果分享，可以做背景，超级好看
分享以下效果复制下一代到你的项目即可 <!DOCTYPE html> <html lang="en"> <head><meta char ...
canvas 粒子效果 - 手残实践纪录
canvas 实践粒子效果首先确定开发的步骤准备基础的 html 跟 css 当背景初始化 canvas 准备一个粒子类 Particle 编写粒子连线的函数 drawLine 编写动画函数 ...
html5粒子效果,8款惊艳的HTML5粒子动画特效
[导读] HTML5确实强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果,粒子动画在HTML5应用中也是比较消耗本地资源的,尤其是CPU,但是有些HTML5粒子效果确实能给用户 ...
html5 图片粒子效果,Canvas + JavaScript 制作图片粒子效果
首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图片是通过im ...
Javascript Canvas 实现粒子动画效果分享
今天和大家一起分享一下用 canvas 实现粒子动画效果的实现,就像下图的效果要实现这样的效果,我们首先需要一段包含了 canvas 的基础 html 代码 <!DOCTYPE html> ...
基于canvas使用粒子拼出你想要的文字[2]——粒子的动画效果
写在最前本次分享一个用canvas粒子渲染文字的"完整"版实现,功能包括:随机粒子缓动动画,粒子汇聚.发散,并拼出你想要的文字.本文继续上面一节基于canvas使用粒子拼出你想要 ...
Canvas和JavaScript实现动态爱心粒子效果
爱心代码简述: 这段代码利用Canvas和JavaScript实现了一个简单的粒子效果,通过绘制爱心形状的粒子并随机生成.更新.绘制粒子,最终形成一个动态的爱心粒子效果.以下是代码的简要分析: 代码 ...
canvas简单的粒子效果的实现
很久没有写博文了,今天抽空做了一个canvas的简单粒子效果需要的基础知识有js的面向对象的基础, canvas的绘图基础首先预览一下效果,点我进入这里我们需要的就是通过定义粒子效果的对象以及粒 ...

canvas放射粒子效果

canvas放射粒子效果相关推荐

最新文章

热门文章