第jscanvas實(shí)現(xiàn)隨機(jī)粒子特效本文實(shí)例為大家分享了jscanvas隨機(jī)粒子特效的具體代碼，供大家參考，具體內(nèi)容如下

前言

canvas實(shí)現(xiàn)前端的特效美術(shù)

結(jié)果展示

代碼

html

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

/head

body

scriptsrc="./main.js"/script

/body

/html

main.js

*粒子化類構(gòu)造

*類功能：

*1.初始化。創(chuàng)建畫(huà)布，規(guī)定粒子屬性等；

*2.創(chuàng)建圖像并且進(jìn)行繪制

*3.區(qū)域顏色定義

*4.粒子移動(dòng)和偏射角度

//生成粒子

letParticle=function(context,options){

letrandom=Math.random();

this.context=context;

//在畫(huà)布里的x坐標(biāo)

this.x=options.x;

//在畫(huà)布里的y坐標(biāo)

this.y=options.y;

//取隨機(jī)數(shù)的1/2，對(duì)角度進(jìn)行隨機(jī)放大

this.s=0.5+Math.random();

//this.s=1+Math.random();

//粒子運(yùn)動(dòng)的變化角度

this.a=0;

//寬度

this.w=window.innerWidth;

//高度

this.h=window.innerHeight;

//半徑

this.radius=options.radius||0.5+Math.random()*10;

//顏色

this.color=options.color||"#E5483F";

//console.log(this.color);

//指定3秒后調(diào)用；

//如果粒子的半徑大于0.5,加入新的粒子。

setTimeout(function(){

if(this.radius0.5){

particles.push(

newParticle(context,{

x:this.x,

y:this.y,

color:this.radius/21"#d6433b":"#FFFFFF",

radius:this.radius/2.2})

}.call(Particle),3000);

//渲染圖像

Ptotype.render=function(){

//從(0,0)開(kāi)始新的路徑；

this.context.beginPath();

//創(chuàng)建曲線弧

this.context.arc(this.x,this.y,this.radius,0,2*Math.PI);

//繪圖的線條寬度

this.context.lineWidth=2;

//顏色填充

this.context.fillStyle=this.color;

//填充當(dāng)前圖像的路徑

this.context.fill();

//返回初始點(diǎn),并且繪制線條到初始位置

this.context.closePath();

Ptotype.swapColor=function(){

//排除白色

if(this.color!="#FFFFFF"){

//判斷左右界面,并且賦顏色的值

if(this.xthis.w/2){

//左半邊

this.color="#36fcfa";

}else{

//右半邊

this.color="#E5483F";

Ptotype.move=function(){

//顏色定義

this.swapColor();

//橫坐標(biāo)按照cos角度進(jìn)行變換，并且對(duì)其進(jìn)行隨機(jī)數(shù)放大；

//偏射角度以便兩個(gè)半界分開(kāi)

this.x+=Math.cos(this.a)*this.s;

this.y+=Math.sin(this.a)*this.s;

//this.y+=Math.cos(this.a)*this.s;

//this.x+=Math.sin(this.a)*this.s;

//在變化后，對(duì)隨機(jī)角度進(jìn)行再重??；

this.a+=Math.random()*0.8-0.4;

//判斷全為0，粒子橫坐標(biāo)無(wú)移動(dòng)；

if(this.x0||this.xthis.w-this.radius){

returnfalse;

//