canvas简单的粒子效果的实现

很久没有写博文了，今天抽空做了一个canvas的简单粒子效果

需要的基础知识有js的面向对象的基础，

canvas的绘图基础

首先预览一下效果，点我进入

这里我们需要的就是通过定义粒子效果的对象以及粒子基点对象，

通过对对象关系分析来构造对象的基本结构，从而得到了一个简单的粒子效果

下面直接上完整代码，

注释已经添加在代码中了

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>粒子效果</title><style type="text/css">body{background: #000000;}</style></head><body><canvas id="c" width="1280" height="800"></canvas><script type="text/javascript">(function(){var c = document.querySelector("#c");var ctx = c.getContext("2d");//基点兑对象function Circle(color,count){this.x=0;//基点的x坐标this.y=0;//基点的y坐标this.r = 25;//基点半径this.color = color;//基点的颜色this.shadowCount = count;//基点散发的粒子个数this.shadows = [];//基点散发的粒子对象集合//初始化粒子的方法this._circle = function(){for(var i=0;i<this.shadowCount;i++){this.shadows.push(new Shadow());}}this._circle();}//基点对象渲染方法Circle.prototype.rounder = function(x,y){this.x = x;this.y = y;for(var i=0;i<this.shadows.length;i++){this.shadows[i].initShadow(this);}ctx.beginPath();ctx.fillStyle = this.color;ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);ctx.fill();}//粒子对象function Shadow(obj){this.jg = Math.random()*30;//渲染粒子的间隔this.x = -1000;//粒子的x坐标this.y = -1000;//粒子的y坐标this.r = -1000;//粒子的半径var R = parseInt(Math.random()*256);//颜色的随机数var G = parseInt(Math.random()*256);//颜色的随机数var B = parseInt(Math.random()*256);//颜色的随机数this.color = "rgb("+R+","+G+","+B+")";//粒子颜色this.fadeR = 300;//粒子的消失距离//粒子移动的角度的弧度值var jd = Math.PI/180*(parseInt(Math.random()*360)) //根据粒子角度来计算得到的粒子x与y方向的速度this.sx = Math.sin(jd)*this.fadeR/100;this.sy = Math.cos(jd)*this.fadeR/100;}//粒子对象渲染方法Shadow.prototype.initShadow=function(obj){//由于每个粒子对象是同时绘制，所以定义随机间隔来实现时间差效果if(this.jg<0){//当数据初始化之后就不再重新对影子赋值if(this.x==-1000){this.x = obj.x;}if(this.y==-1000){this.y = obj.y;}if(this.r==-1000){this.r = obj.r;}//只有在对象的半径是正数的时候渲染影子if(this.r>0){ctx.beginPath();ctx.fillStyle = this.color;ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);this.x+=this.sx;this.y+=this.sy;this.r-=this.fadeR/300;ctx.fill();}else{//当半径失效之后调用初始化方法让粒子重新出现实现单个对象的不规则状态循环this.init();}}else{this.jg--;}}//粒子结束后重新初始化Shadow.prototype.init = function(){this.jg = Math.random()*30;this.x = -1000;this.y = -1000;this.r = -1000;var R = parseInt(Math.random()*256);var G = parseInt(Math.random()*256);var B = parseInt(Math.random()*256);this.color = "rgb("+R+","+G+","+B+")";this.fadeR = 300;var jd = Math.PI/180*(parseInt(Math.random()*360))this.sx = Math.sin(jd)*this.fadeR/100;this.sy = Math.cos(jd)*this.fadeR/100;}//实例化本体对象var c1 = new Circle("rgba(100,230,140,0.5)",100);var x = 0;var y = 0;//动画启动方法function startFill(){ctx.clearRect(0,0,c.width,c.height)c1.rounder(x,y);}//鼠标跟踪方法c.addEventListener("mousemove",function(e){x = e.offsetX;y = e.offsetY;});//开启定时器window.setInterval(startFill,17);})();</script></body>
</html>

有兴趣的可以研究一下canvas可以在web环境中实现任何你想要实现的视觉效果

canvas简单的粒子效果的实现相关推荐

三维电子无人机倾斜摄影数字沙盘开发第38课实现简单的粒子效果
三维电子无人机倾斜摄影数字沙盘开发第38课实现简单的粒子效果设置system.ini 如下内容 Server=122.112.229.220 user=GisTest Password=china ...
利用WPF建立自己的3d gis软件（非axhost方式）（七）实现简单的粒子效果
先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bPew 密码:1te1 设置system.ini 如下内容 Server=122.112.229. ...
Qt用qml实现简单的粒子效果
粒子系统,一直是各大游戏引擎标配的一个模块粒子系统表示三维计算机图形学中模拟一些特定的模糊现象的技术,而这些现象用其它传统的渲染技术难以实现的真实感的 game physics. 经常使用粒子系统模 ...
Canvas和JavaScript实现动态爱心粒子效果
爱心代码简述: 这段代码利用Canvas和JavaScript实现了一个简单的粒子效果,通过绘制爱心形状的粒子并随机生成.更新.绘制粒子,最终形成一个动态的爱心粒子效果.以下是代码的简要分析: 代码 ...
html5粒子效果,8款惊艳的HTML5粒子动画特效
[导读] HTML5确实强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果,粒子动画在HTML5应用中也是比较消耗本地资源的,尤其是CPU,但是有些HTML5粒子效果确实能给用户 ...
OGEngine_粒子效果
粒子系统粒子系统表示三维计算机图形学中模拟一些特定的模糊现象的技术,而这些现象用其它传统的渲染技术难以实现的真实感的 game physics.经常使用粒子系统模拟的现象有火.爆炸.烟.水流.火花. ...
android opengl es 粒子效果实例代码
概述:粒子系统采用许多形状简单的微小粒子作为基本元素,用它们来表示不规则模糊物体,系统中的每个粒子都有各自的生命周期,我们可以管理它们从创建到消亡的时间,它们都要经历"产生".&q ...
unity3d简单的粒子特效
实现目标实现一个简单的粒子效果实现过程首先创建一个空的对象,然后添加一个Particle System 编写控制粒子运动的脚本在Start函数中对需要用到的参数进行初始化 particleAr ...
canvas 粒子效果 - 手残实践纪录
canvas 实践粒子效果首先确定开发的步骤准备基础的 html 跟 css 当背景初始化 canvas 准备一个粒子类 Particle 编写粒子连线的函数 drawLine 编写动画函数 ...

canvas简单的粒子效果的实现

canvas简单的粒子效果的实现相关推荐

最新文章

热门文章