htm5实现视差动画
requestAnimationFrame.js
1 window.requestAnimFrame = (function() { 2 return window.requestAnimationFrame || 3 window.webkitRequestAnimationFrame || 4 window.mozRequestAnimationFrame || 5 window.oRequestAnimationFrame || 6 window.msRequestAnimationFrame || function( /* function */ callback, /* DOMElement */ element) { 7 window.setTimeout(callback, 1000 / 60); 8 }; 9 })();
页面主要代码：
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <title>视差动画</title> 7 <script type="text/javascript" src="js/jquery8.js"></script> 8 <script type="text/javascript" src="js/requestAnimationFrame.js"></script> 9 <style type="text/css"> 10 body { 11 background:#dddddd; 12 } 13 #control { 14 width:1000px; 15 margin:0 auto; 16 } 17 #containter { 18 text-align:center; 19 } 20 21 #canavas { 22 margin:10px; 23 padding:10px; 24 background:#ffffff; 25 border:thin #aaaaaa; 26 } 27 </style> 28 <script type="text/javascript"> 29 30 $(function() { 31 32 canvas = jQuery("#canavas")[0]; 33 content = canvas.getContext("2d"); 34 35 //天空背景 36 sky = new Image(); 37 sky.src = "image/back.jpg"; 38 39 //云朵 40 c1 = new Image(); 41 c1.src = "image/cloud2.png"; 42 43 c2 = new Image(); 44 c2.src = "image/cloud1.jpg"; 45 46 c3 = new Image(); 47 c3.src = "image/cloud3.jpg"; 48 49 lastTime = (+new Date()) 50 requestAnimFrame(animate); 51 52 pause=false; 53 $("#b1").click(function(){ 54 55 pause=!pause; 56 57 }); 58 59 }); 60 //获取随机数据 61 function getRandom(min, max) { 62 63 return parseInt(Math.random() * (max - min) + min); 64 65 } 66 67 68 69 SKY_VELOCITY = 50; 70 skyOffset = 0; 71 72 C1_VELOCITY = 100; 73 c1Offset = 0; 74 75 C2_VELOCITY = 150; 76 c2Offset = 0; 77 78 C3_VELOCITY = 200; 79 c3Offset = 0; 80 81 fangxiag = 1; 82 83 function drawBack() { 84 85 //背景移位 86 skyOffset = skyOffset < sky.width ? skyOffset + SKY_VELOCITY / fps : 0; 87 88 //远/中/近 三处的云朵移位 89 c1Offset = c1Offset < canvas.width ? c1Offset + C1_VELOCITY / fps : 0; 90 c2Offset = c2Offset < canvas.width ? c2Offset + C2_VELOCITY / fps : 0; 91 c3Offset = c3Offset < canvas.width ? c3Offset + C3_VELOCITY / fps : 0; 92 93 //绘制三朵云 94 content.save(); 95 content.translate(-skyOffset, 0); 96 content.drawImage(sky, 0, 0); 97 content.drawImage(sky, sky.width, 0); 98 content.restore(); 99 100 content.save(); 101 content.translate(-c1Offset, 0); 102 content.drawImage(c1, 50, 50); 103 content.drawImage(c1, 600, 70); 104 content.drawImage(c1, 1050, 50); 105 content.drawImage(c1, 1600, 70); 106 content.restore(); 107 108 content.save(); 109 content.translate(-c2Offset, 0); 110 content.drawImage(c2, 130, 120); 111 content.drawImage(c2, 730, 170); 112 content.drawImage(c2, 1130, 120); 113 content.drawImage(c2, 1730, 170); 114 content.restore(); 115 116 content.save(); 117 content.translate(-c3Offset, 0); 118 content.drawImage(c3, 600, 250); 119 content.drawImage(c3, 100, 320); 120 content.drawImage(c3, 1600, 250); 121 content.drawImage(c3, 110, 320); 122 content.restore(); 123 124 } 125 126 127 fps = 0; 128 //实现动画 129 function animate(time) { 130 131 if(!pause){ 132 133 //清楚背景 134 content.clearRect(0, 0, canvas.width, canvas.height); 135 //计算fps 136 fps = geFps(time); 137 138 //绘制背景 139 drawBack(); 140 141 //绘制即时参数 142 content.fillText(fps.toFixed() + " fps", 20, 20); 143 144 }else{ 145 146 lastFpsUpdateTime=time; 147 148 } 149 //继续下一帧动画 150 requestAnimFrame(animate); 151 } 152 153 154 155 var lastFpsUpdateTime = 0; 156 //计算fps 157 function geFps(time) { 158 159 fps = 1000 / (time - lastFpsUpdateTime); 160 161 lastFpsUpdateTime = time; 162 163 return fps; 164 165 } 166 </script> 167 </head> 168 169 <body> 170 <div id="control"> 171 <input id="b1" type="button" value="暂停" /> 172 173 </div> 174 <div id="containter"> 175 <canvas id="canavas" width="500" height="200"></canvas> 176 </div> 177 </body> 178 179 </html>
来看效果：