欲查看动态效果请点击下载代码再用Chrome或Firefox打开index.html
图例：
代码：
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>动态背景 19.3.4 10:21 by:逆火狂飙 horn19782016@163.com</title> <style> #canvas{ background:#ffffff; cursor:pointer; margin-left:10px; margin-top:10px; -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5); -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5); box-shadow:3px 3px 6px rgba(0,0,0,0.5); } #controls{ margin-top:10px; margin-left:15px; } </style> </head> <body onload="init()"> <div id="controls"> <input id='animateBtn' type='button' value='运动'/> </div> <canvas id="canvas" width="1024px" height="576px" > 出现文字表示你的浏览器不支持HTML5 </canvas> </body> </html> <script type="text/javascript"> <!-- var paused=true; animateBtn.onclick=function(e){ paused=! paused; if(paused){ animateBtn.value="运动"; }else{ animateBtn.value="暂停"; window.requestAnimationFrame(animate); } } var ctx;// 绘图环境 var bg;// 背景 var bgOffset; var bgVelocity; function init(){ // init Canvas var canvas=document.getElementById('canvas'); canvas.width=1024; canvas.height=576; ctx=canvas.getContext('2d'); // init varialbles bg=new Image(); bg.src="garden.jpg"; bgOffset=0; bgVelocity=10; }; function update(){ } function draw(){ ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); bgOffset+=bgVelocity; if(bgOffset>ctx.canvas.width){ bgOffset=0; } ctx.drawImage(bg,bgOffset,0,ctx.canvas.width-bgOffset,canvas.height,0,0,ctx.canvas.width-bgOffset,canvas.height); ctx.drawImage(bg,0,0,bgOffset,canvas.height,ctx.canvas.width-bgOffset,0,bgOffset,canvas.height); } function animate(){ if(!paused){ update(); draw(); //setTimeout( function(){ window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率 //}, 0.20 * 1000 );// 延时执行 } } //--> </script>
2019年3月4日11点02分