前端开发的动画实例|前端开发者 html 代码 <!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=”utf-8″ /><br /> <meta name=”author” content=”” /><br /> <meta name=”keywords” content=”” /><br /> <meta name=”description” content=”” /><br /> <meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=no” /><br /> <title> 线条特效 </title><br /> <style><br /> html,body{height:100%;}<br /> canvas{display:block;width:100%;height:50vh;margin:2em auto;background:green;}</p> <p> </style><br /> </head><br /> <body><br /> <canvas id=”stage”></canvas><br /> <script></p> <p> “use strict”;<br /> (function(){<br /> var cvs=document.querySelector(“#stage”),<br /> bound=cvs.getBoundingClientRect(),<br /> width=bound.width,<br /> height=bound.height,<br /> ctx=cvs.getContext(“2d”);</p> <p> cvs.width=width;<br /> cvs.height=height;</p> <p> var fl=100,<br /> angleX=0,<br /> angleY=0,<br /> curX=0,<br /> curY=0,<br /> balls=[],<br /> ballsNum=60,<br /> i=ballsNum,<br /> lines=[],<br /> perspective,<br /> color={<br /> sIdx:0,<br /> eIdx:120,<br /> sSpeed:0.4,<br /> eSpeed:0.5,<br /> c:[0,”100%”,”50%”],<br /> getStart:function(){<br /> var out=”hsl(“;<br /> this.sIdx+=this.sSpeed;<br /> this.sIdx%=360;<br /> this.c[0]=this.sIdx|0;<br /> out+=this.c.join(“,”);<br /> out+=”)”;<br /> return out;<br /> },<br /> getEnd:function(){<br /> var out=”hsl(“;<br /> this.eIdx+=this.eSpeed;<br /> this.eIdx%=360;<br /> this.c[0]=this.eIdx|0;<br /> out+=this.c.join(“,”);<br /> out+=”)”;<br /> return out;<br /> }<br /> };</p> <p> function Perspective(fl,cpX,cpY,cpZ)<br /> {<br /> this.fl=fl;<br /> this.cpX=cpX;<br /> this.cpY=cpY;<br /> this.cpZ=cpZ;<br /> }</p> <p> Perspective.prototype.rotateX=function(sin,cos){<br /> var y=cos*this.y-sin*this.z,<br /> z=cos*this.z+sin*this.y;</p> <p> this.y=y;<br /> this.z=z;<br /> };</p> <p> Perspective.prototype.rotateY=function(sin,cos){<br /> var x=cos*this.x-sin*this.z,<br /> z=cos*this.z+sin*this.x;</p> <p> this.x=x;<br /> this.z=z;<br /> };</p> <p> Perspective.prototype.rotateZ=function(sin,cos){<br /> var x=cos*this.x-sin*this.y,<br /> y=cos*this.y+sin*this.x;</p> <p> this.x=x;<br /> this.y=y;<br /> };</p> <p> Perspective.prototype.rotateXY=function(sinX,cosX,sinY,cosY){<br /> var y=cosX*this.y-sinX*this.z,<br /> z=cosX*this.z+sinX*this.y,<br /> x=this.x,<br /> x1=cosY*x-sinY*y,<br /> y1=cosY*y+sinY*x;</p> <p> this._y=y1;<br /> this._x=x1;<br /> this._z=z;<br /> };</p> <p> Perspective.prototype.getPoint=function(){<br /> var scale=this.fl/(this.fl+this._z+this.cpZ); </p> <p> return {<br /> x:this.cpX+this._x*scale,<br /> y:this.cpY+this._y*scale<br /> };<br /> };</p> <p> perspective=new Perspective(fl,width/2,height*2/3,100);</p> <p> function Draw(f){<br /> this.draw=f;<br /> }</p> <p> Draw.prototype=perspective;</p> <p> function Ball3d(x,y,z){<br /> this.x=x;<br /> this.y=y;<br /> this.z=z;<br /> this.radius=2;<br /> }</p> <p> Ball3d.prototype=new Draw(function(ctx){<br /> var pos=this.getPoint();<br /> ctx.beginPath();<br /> ctx.arc(pos.x,pos.y,this.radius,0,Math.PI*2,true);<br /> ctx.closePath();<br /> ctx.fill();<br /> return pos;<br /> });</p> <p> while(i–)<br /> {<br /> balls[i]=new Ball3d((Math.random()*width-width/2)*3,(Math.random()*height-height/2)*4,Math.random()*500-300);<br /> }</p> <p> function move(){<br /> curX+=(angleX-curX)*0.05;<br /> curY+=(angleY-curY)*0.05;<br /> if(Math.abs(curY-angleY)>0.001||Math.abs(curX-angleY)>0.001)<br /> {<br /> var sinX=Math.sin(curX),<br /> cosX=Math.cos(curX),<br /> sinY=Math.sin(curY),<br /> cosY=Math.cos(curY),</p> <p> i=ballsNum;</p> <p> while(i–)<br /> {<br /> balls[i].rotateXY(sinX,cosX,sinY,cosY);<br /> }<br /> }</p> <p> }</p> <p> ctx.lineWidth=0.5;<br /> ctx.strokeStyle=”rgba(255,255,.5)”;</p> <p> function drawFrame(){<br /> var i=ballsNum,gradient=ctx.createLinearGradient(0,0,width,0);</p> <p> gradient.addColorStop(0, color.getStart());<br /> gradient.addColorStop(1, color.getEnd());<br /> ctx.fillStyle=gradient;</p> <p> ctx.fillRect(0,0,width,height); </p> <p> move();<br /> ctx.fillStyle=ctx.strokeStyle=”rgba(255,255,255,.5)”;<br /> while(i–)<br /> {<br /> lines[i]=balls[i].draw(ctx);<br /> }</p> <p> i=ballsNum-1;<br /> ctx.beginPath();<br /> ctx.moveTo(lines[i].x,lines[i].y);<br /> while(i–)<br /> {<br /> ctx.lineTo(lines[i].x,lines[i].y);<br /> }</p> <p> ctx.stroke();<br /> requestAnimationFrame(drawFrame);</p> <p> }<br /> document.body.addEventListener(“mousemove”,function(e){<br /> angleY= (e.clientX – width/2) * 0.001;<br /> angleX = (e.clientY – innerHeight/2) * 0.001;</p> <p>},false);<br /> drawFrame();</p> <p> })();<br /> </script></p> <p> </body><br /> </html> 前端开发的动画实例|网站前端开发 https://www.rokub.com » 本文来自:前端开发者 » 《前端开发的动画实例_Canvas 3D线条动画特效》 » 本文链接地址:https://www.rokub.com/2906.html » 您也可以订阅本站:https://www.rokub.com
评论前必须登录!
注册