canvas彩色正方体粒子飞跃背景动画效果代码-html代码-BFW代码库

canvas彩色正方体粒子飞跃背景动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas彩色正方体粒子飞跃背景动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />


</head>

<body>
    <canvas height="300" width="200" id="canvas"></canvas>
    <script type="text/javascript">
        function project3D(x,y,z,vars){
    
    	var p,d;
    	x-=vars.camX;
    	y-=vars.camY;
    	z-=vars.camZ;
    	p=Math.atan2(x,z);
    	d=Math.sqrt(x*x+z*z);
    	x=Math.sin(p-vars.yaw)*d;
    	z=Math.cos(p-vars.yaw)*d;
    	p=Math.atan2(y,z);
    	d=Math.sqrt(y*y+z*z);
    	y=Math.sin(p-vars.pitch)*d;
    	z=Math.cos(p-vars.pitch)*d;
    	p=Math.atan2(x,y);
    	d=Math.sqrt(x*x+y*y);
    	x=Math.sin(p-vars.roll)*d;
    	y=Math.cos(p-vars.roll)*d;
    	return {x:vars.cx+x/z*vars.scale,y:vars.cy+y/z*vars.scale,d:z>0?Math.sqrt(x*x+y*y+z*z):-1}
    }
    
    function rgb(col){
    
    	col += 0.000001;
    	var r = parseInt((0.5+Math.sin(col)*0.5)*16);
    	var g = parseInt((0.5+Math.cos(col)*0.5)*16);
    	var b = parseInt((0.5-Math.sin(col)*0.5)*16);
    	return "#"+r.toString(16)+g.toString(16)+b.toString(16);
    }
    
    function process(vars){
    
    	vars.scale-=Math.cos(vars.frameNo/40)*8;
    	vars.shipSpeed+=Math.cos(vars.frameNo/40)/30;
    	vars.yaw+=Math.cos(vars.frameNo/100)/80;
    	vars.pitch+=Math.sin(vars.frameNo/70)/40;
    	vars.roll-=Math.cos(vars.frameNo/130)/40;
    	vars.shipVX=Math.sin(vars.yaw)*Math.cos(vars.pitch)*vars.shipSpeed;
    	vars.shipVZ=Math.cos(vars.yaw)*Math.cos(vars.pitch)*vars.shipSpeed;
    	vars.shipVY=Math.sin(vars.pitch)*vars.shipSpeed;
    	vars.camX+=vars.shipVX;
    	vars.camY+=vars.shipVY;
    	vars.camZ+=vars.shipVZ;
    
    	for(var i=0;i<vars.shapes.length;++i){
    		rotateShape(vars.shapes[i],i/vars.shapes.length*.1,-i/vars.shapes.length*.1,i/vars.shapes.length*.1);
    		if(vars.shapes[i].x-vars.camX>vars.fieldRadius)vars.shapes[i].x-=vars.fieldRadius*2;
    		if(vars.shapes[i].x-vars.camX<-vars.fieldRadius)vars.shapes[i].x+=vars.fieldRadius*2;
    		if(vars.shapes[i].y-vars.camY>vars.fieldRadius)vars.shapes[i].y-=vars.fieldRadius*2;
    		if(vars.shapes[i].y-vars.camY<-vars.fieldRadius)vars.shapes[i]..........完整代码请登录后点击上方下载按钮下载查看