前端开发的动画实例：Canvas 3D线条动画特效

由前端开发者 · 2018年5月20日00:39:16

摘要：前端开发的动画实例|前端开发者 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <meta name=……

前端开发的动画实例|前端开发者

html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html">html</a>> <<a href="https://www.rokub.com/category/html" title="html">html</a>> <head> <meta charset=”utf-8″ /> <meta name=”author” content=”” /> <meta name=”keywords” content=”” /> <meta name=”description” content=”” /> <meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scalable=no” /> <title> 线条特效 </title> <style> <a href="https://www.rokub.com/category/html" title="html">html</a>,body{height:100%;} canvas{display:block;width:100%;height:50vh;margin:2em auto;background:green;} </style> </head> <body> <canvas id=”stage”></canvas> <script> “use strict”; (function(){ var cvs=document.querySelector(“#stage”), bound=cvs.getBoundingClientRect(), width=bound.width, height=bound.height, ctx=cvs.getContext(“2d”); cvs.width=width; cvs.height=height; var fl=100, angleX=0, angleY=0, curX=0, curY=0, balls=[], ballsNum=60, i=ballsNum, lines=[], perspective, color={ sIdx:0, eIdx:120, sSpeed:0.4, eSpeed:0.5, c:[0,”100%”,”50%”], getStart:function(){ var out=”hsl(“; this.sIdx+=this.sSpeed; this.sIdx%=360; this.c[0]=this.sIdx|0; out+=this.c.join(“,”); out+=”)”; return out; }, getEnd:function(){ var out=”hsl(“; this.eIdx+=this.eSpeed; this.eIdx%=360; this.c[0]=this.eIdx|0; out+=this.c.join(“,”); out+=”)”; return out; } }; function Perspective(fl,cpX,cpY,cpZ) { this.fl=fl; this.cpX=cpX; this.cpY=cpY; this.cpZ=cpZ; } Perspective.prototype.rotateX=function(sin,cos){ var y=cos*this.y-sin*this.z, z=cos*this.z+sin*this.y; this.y=y; this.z=z; }; Perspective.prototype.rotateY=function(sin,cos){ var x=cos*this.x-sin*this.z, z=cos*this.z+sin*this.x; this.x=x; this.z=z; }; Perspective.prototype.rotateZ=function(sin,cos){ var x=cos*this.x-sin*this.y, y=cos*this.y+sin*this.x; this.x=x; this.y=y; }; Perspective.prototype.rotateXY=function(sinX,cosX,sinY,cosY){ var y=cosX*this.y-sinX*this.z, z=cosX*this.z+sinX*this.y, x=this.x, x1=cosY*x-sinY*y, y1=cosY*y+sinY*x; this._y=y1; this._x=x1; this._z=z; }; Perspective.prototype.getPoint=function(){ var scale=this.fl/(this.fl+this._z+this.cpZ); return { x:this.cpX+this._x*scale, y:this.cpY+this._y*scale }; }; perspective=new Perspective(fl,width/2,height*2/3,100); function Draw(f){ this.draw=f; } Draw.prototype=perspective; function Ball3d(x,y,z){ this.x=x; this.y=y; this.z=z; this.radius=2; } Ball3d.prototype=new Draw(function(ctx){ var pos=this.getPoint(); ctx.beginPath(); ctx.arc(pos.x,pos.y,this.radius,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); return pos; }); while(i–) { balls[i]=new Ball3d((Math.random()*width-width/2)*3,(Math.random()*height-height/2)*4,Math.random()*500-300); } function move(){ curX+=(angleX-curX)*0.05; curY+=(angleY-curY)*0.05; if(Math.abs(curY-angleY)>0.001||Math.abs(curX-angleY)>0.001) { var sinX=Math.sin(curX), cosX=Math.cos(curX), sinY=Math.sin(curY), cosY=Math.cos(curY), i=ballsNum; while(i–) { balls[i].rotateXY(sinX,cosX,sinY,cosY); } } } ctx.lineWidth=0.5; ctx.strokeStyle=”rgba(255,255,.5)”; function drawFrame(){ var i=ballsNum,gradient=ctx.createLinearGradient(0,0,width,0); gradient.addColorStop(0, color.getStart()); gradient.addColorStop(1, color.getEnd()); ctx.fillStyle=gradient; ctx.fillRect(0,0,width,height); move(); ctx.fillStyle=ctx.strokeStyle=”rgba(255,255,255,.5)”; while(i–) { lines[i]=balls[i].draw(ctx); } i=ballsNum-1; ctx.beginPath(); ctx.moveTo(lines[i].x,lines[i].y); while(i–) { ctx.lineTo(lines[i].x,lines[i].y); } ctx.stroke(); requestAnimationFrame(drawFrame); } document.body.addEventListener(“mousemove”,function(e){ angleY= (e.clientX – width/2) * 0.001; angleX = (e.clientY – innerHeight/2) * 0.001; },false); drawFrame(); })(); </script> </body> </html>

前端开发的动画实例|网站前端开发

https://www.rokub.com

» 本文来自：前端开发者 » 《前端开发的动画实例：Canvas 3D线条动画特效》

» 本文链接地址：https://www.rokub.com/2906.html

» 您也可以订阅本站：https://www.rokub.com

前端开发的动画实例：Canvas 3D线条动画特效

You may also like...

发表评论取消回复

前端开发者/SEO-技术群/抢票群(加本人微信拉群）

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

前端开发的动画实例：Canvas 3D线条动画特效

You may also like...

H5 canvas倒计时

前端开发canvas雨滴

自制前端开发h5视频播放器_模仿

发表评论 取消回复

前端开发者/SEO-技术群/抢票群(加本人微信拉群）

近期文章

近期评论

分类目录

搜索文章

精选

联系方式

发表评论取消回复