canvas实现连杆机械拼字动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现连杆机械拼字动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ height:100%; /*background: radial-gradient(#00d2ff, #3a7bd5);*/ background:black; } canvas{ display:block; margin:0 auto; margin:calc(50vh - 150px) auto; } </style> </head> <body> <!-- partial:index.partial.html --> <canvas id="canvas">Su navegador no soporta canvas :( </canvas> <!-- partial --> <script > var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width = 500, cx = cw / 2; var ch = canvas.height = 300, cy = ch / 2; var rad = Math.PI / 180; var tim = .025; var hate = true; ctx.fillStyle = "hsla(45,90%,50%,.7)"; ctx.strokeStyle = "hsla(45,60%,40%,1)"; function Segment(x,y,w,h,rot){ this.x = x; this.y = y; this.w = w; this.h = h; this.rot = rot*rad; this.pin = this.getPin(); this.bool = true; } Segment.prototype.draw = function(){ var h = this.h; var w = this.w; //var d = w + h;// diagonal ??? var cr = h/2 // corner radius ctx.save(); ctx.fillStyle = Grd(); ctx.translate(this.x,this.y); ctx.rotate(this.rot); ctx.scale(this.scalex,this.scaley) ctx.beginPath(); ctx.moveTo(0, -cr); ctx.lineTo(w, -cr); ctx.quadraticCurveTo(w+cr,-cr, w+cr,0); ctx.quadraticCurveTo(w+cr,cr, w,cr); ctx.lineTo(0, cr); ctx.quadraticCurveTo(-cr,cr, -cr,0); ctx.quadraticCurveTo(-cr,-cr, 0,-cr); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(0, 0,2,0,2*Math.PI); ctx.stroke(); ctx.beginPath(); ctx.arc(w,0,2,0,2*Math.PI); ctx.stroke(); ctx.restore(); } Segment.prototype.getPin = function(){ return { x:this.x + this.w*Math.cos(this.rot), y:this.y + this.w*Math.sin(this.rot) } } // H -> L var h = []; var h_angles = [ [90,90], [-90,0], [0,-180], [-90,-90] ]; h[0] = new Segment(60,100,100,25,h_angles[0][0]); h[1] = new Segment(h[0].pin.x,h[0].pin.y,50,25,h_angles[1][0]); h[2] = new Segment(h[1].pin.x,h[1].pin.y,50,25,h_angles[2][0]); h[3] = new Segment(h[2].pin.x,200,100,25,-90,h_angles[3][0]); // A -> O var a = []; var a_angles = [ [-70,-90], [110,0], [-70,0], [70,90], [-110,180], [180,180] ]; a[0] = new Segment(h[3].pin.x + 50,200,100,25,a_angles[0][0]); a[1] = new Segment(a[0].pin.x,a[0].pin.y,25,25,a_angles[1][0]); a[2] = new Segment(a[1].pin.x,a[1].pin.y,25,25,a_angles[2][0]); a[3] = new Segment(a[2].pin.x,a[2].pin.y,100,25,a_angles[3][0]); a[4] = new Segment(a[3].pin.x,a[3].pin.y,25,25,a_angles[4][0]); a[5] = new Segment(a[4].pin.x,a[4].pin.y,25,25,a_angles[5][0]); // T -> V var t = []; var t_angles = [ [-90,-110], [180,70], [-90,-70], [0,110] ]; t[0] = new Segment(a[5].pin.x + 100,200,100,25,t_angles[0][0]); t[1] = new Segment(t[0].pin.x,t[0].pin.y,35,25,t_angles[1][0]); t[2] = new Segment(a[5].pin.x + 100,200,100,25,t_angles[2][0]); t[3] = new Segment(t[2].pin.x,t[2].pin.y,35,25,t_angles[3][0]); //DrawT(); // E var e = [] e[0] = new Segment(t[2].pin.x + 90,100,100,25,90); e[1] = new Segment(e[0].pin.x,100,50,25,0); e[2] = new Segment(e[0].pin.x,e[0].pin.y,50,25,0); e[3] = new Segment(e[0].pin.x,e[0].pin.y,50,25,-90); e[4] = new Segment(e[3].pin.x,e[3].pin.y,35,25,0); Draw(); function Animacion() { elId = window.requestAnimationFrame(Animacion); ctx.clearRect(0, 0, cw, ch); if(hate){ if(h[1].bool || h[2].bool ){ if(h[1].rot < h_angles[1][1] * rad){ h[1].rot += tim;}else{h[1].rot = h_angles[1][1] * rad;h[1].bool = false;} if(h[2].rot > h_angles[2][1] * rad){ h[2].rot -= tim;}else{h[2].rot = h_angles[2][1] * rad;h[2].bool = false;} } else if(a[0].bool || a[1].bool || a[2].bool || a[3].bool || a[4].bool){ if(a[0].rot > a_angles[0][1] * rad){ a[0].rot -= tim;}else{a[0].rot = a_angles[0][1] * rad;a[0].bool = false;} if(a[1].rot > a_angles[1][1] * rad){ a[1].rot -= tim;}else{a[1].rot = a_angles[1][1] * rad;a[1].bool = false.........完整代码请登录后点击上方下载按钮下载查看
网友评论0