标签：nim padding keycode load die lan amp hang back
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>物联网金融</title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } canvas { display: block; } </style> </head> <body> <audio id="myBJAudio" controls preload="auto" autoplay loop style="display: none" src="SceneTwo/BJ.mp3"> Your browser does not support the audio element. </audio> <audio id="myLockAudio" controls preload="auto" style="display: none" src="SceneTwo/LOCK.wav"> Your browser does not support the audio element. </audio> <canvas id="canvas"> <p>Your browser does not support the canvas element!</p> </canvas> <script type="text/javascript"> var canvas;//画布 var SceneSwitch = 1;//动画选择 var FrameSecond = 60;//更新时间（毫秒） var AnimController;//动画控制 //定义5个动画 var Anim1,Anim2,Anim3,Anim4,Anim5; //动画控制函数 function Controller(){ switch(SceneSwitch){ case 1: Anim3.Draw(); break; case 2: Anim3.Draw(); Anim1.Draw(); break; case 3: Anim3.Draw(); Anim1.Draw(); Anim2.Draw(); break; case 4: Anim1.Draw(); Anim2.Draw(); Anim3.Draw(); Anim4.Draw(); break; default: Anim5.Draw(); break; } //不断刷新 AnimController = setTimeout("Controller()",FrameSecond); } window.onload = function () { canvas = document.getElementById("canvas"); canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; //绘制背景 DrawBackground(); //实例化动画对象 Anim1 = new PicAnim("SceneOne/ShangHai/",1,74,20,0,2720,canvas.height); //初始化+启用循环（24帧到74帧循环） Anim1.Init().SetLoop(true,24,74); Anim2 = new PicAnim("SceneOne/Dollor/",1,64,Anim1.X+Anim1.Width,0,1000,canvas.height); Anim2.Init().SetLoop(false); //设置下一个动画 Anim1.Next = Anim2; Anim3 = new PicAnim("SceneOne/BallX/",1,161,Anim2.X+Anim2.Width,0,3200,canvas.height); Anim3.Init().SetLoop(false); Anim4 = new PicAnim("SceneOne/Map/",1,52,Anim3.X+Anim3.Width,0,2600,canvas.height); Anim4.Init().SetLoop(false); Anim5 = new PicAnim("SceneTwo/Pictures/IMG",1,2500,0,0,canvas.width,canvas.height); Anim5.Init().SetLoop(true,2200,2500); Anim5.LoopType = 2;//循环方式，1双向循环，2单向循环 Anim5.Width = canvas.width;//设置画面宽度 Anim5.HasBack = true;//是否有背景，如果有则不会调用背景绘制函数 Anim5.Format=2;//设置文件命名格式 Anim5.Extenes = ".jpg";//序列帧后缀名 Anim5.Keys.push(250);//关键帧，到帧停止，S键再次启动 //启动动画控制 AnimController = setTimeout("Controller()",FrameSecond); } //动画对象，路径、第一张图片名，最后一张图片名，x轴，y轴，宽度，高度 //*图片都是通过数字进行顺序命名 function PicAnim(path,min,max,x,y,w,h){ this.Path = path; this.Index = min; this.MinIndex = min; this.MaxIndex = max; this.X = x; this.Y = y; this.Width = w; this.Height = h; this.Extenes = ".png"; this.Format = 1; this.Picture = new Image(); this.Loading = false; this.Drawed = true; this.HasBack = false; this.IsLoop = false; this.LoopBegin = min; this.LoopEnd = max; this.LoopType = 1; this.Keys = new Array(); var loopDir = 1; var obj = this; this.Init = function(){ obj.Height = canvas.height; obj.Width = canvas.width/10240*obj.Width; return obj; } this.SetLoop = function(loop,loopBegin,loopEnd){ obj.IsLoop = loop; obj.LoopBegin = loopBegin; obj.LoopEnd = loopEnd; return obj; } this.Next = null; var isNextStart = false; this.Draw = function(){ if(obj.Drawed){ obj.Drawed = false; if(obj.Format!=1){ obj.Picture.src = obj.Path+obj.Index+obj.Extenes; }else{ obj.Picture.src = obj.Path+"("+obj.Index+")"+obj.Extenes; } obj.Picture.onload = function(){ var context = canvas.getContext("2d"); if(!obj.HasBack) DrawAreaBack(obj.X,obj.Y,obj.Width,obj.Height); context.drawImage(obj.Picture,obj.X,obj.Y,obj.Width,obj.Height); if(false==isNextStart&&null!=obj.Next&&obj.Index>=obj.MaxIndex){ isNextStart=true; SceneSwitch++; } if(obj.IsLoop){ obj.Index+=loopDir; //Begin 场景2 跳帧专用 if (obj.Index == 1160) document.getElementById("myLockAudio").play(); if(obj.Index>1360&&obj.Index<2490) obj.Index+=2; //End if(obj.Index>=obj.LoopEnd){ if(obj.LoopType==1) loopDir = -1; else obj.Index=obj.LoopBegin; } else if(obj.Index<=obj.LoopBegin) loopDir = 1; }else{ obj.Index++; if(obj.Index>obj.MaxIndex){ obj.Index = obj.MaxIndex; } } if(obj.Keys.length>0){ var i=0; for(;i<obj.Keys.length;i++){ if(obj.Keys[i]==obj.Index) break; } if(i<obj.Keys.length) obj.Drawed=false; else obj.Drawed=true; }else{ obj.Drawed = true; } } } } } function DrawBackground() { DrawAreaBack(0,0,canvas.width,canvas.height); } function DrawAreaBack(x,y,w,h){ var context = canvas.getContext("2d"); var linearGradient1 = context.createLinearGradient(0, canvas.height, 0, 0); linearGradient1.addColorStop(0, ‘rgb(0, 7, 17)‘); linearGradient1.addColorStop(0.5, ‘rgb( 3, 26, 60)‘); context.fillStyle = linearGradient1; context.fillRect(x, y, w, h); } window.onkeydown = disableRefresh; function disableRefresh(evt) { evt = (evt) ? evt : window.event if (evt.keyCode) { if (evt.keyCode == 83) { if(SceneSwitch<5) SceneSwitch++; else{ Anim5.Index = Anim5.Keys[0]+1; Anim5.Drawed = true; } } } } </script> </body> </html>
标签：nim padding keycode load die lan amp hang back
原文地址：http://www.cnblogs.com/mr-yoatl/p/7413138.html
