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