欲看动态效果请点击下载并用Chrome/Firefox浏览器打开index,html。
图例：
从效果可以明显的看到，五角星边缘和中心都没有对背景遮挡。
代码：
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>动态背景3 19.3.4 12:43 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="1200px" height="562px" > 出现文字表示你的浏览器不支持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 icon1; var icon2; var bgOffset; var bgVelocity; function init(){ // init Canvas var canvas=document.getElementById('canvas'); canvas.width=1200; canvas.height=562; ctx=canvas.getContext('2d'); // init varialbles bg=new Image(); bg.src="greenBG.jpg"; icon1=new Image(); icon1.src="fiveStar1.png"; icon2=new Image(); icon2.src="fiveStar2.png"; bgOffset=0; bgVelocity=10; }; function update(){ } var index=0; 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); index++; if(index>100){ index=0; } if(index % 2 ==0){ ctx.drawImage(icon1,20,60); }else{ ctx.drawImage(icon2,20,60); } } function animate(){ if(!paused){ update(); draw(); setTimeout( function(){ window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率 }, 0.20 * 1000 );// 延时执行 } } //--> </script>
2019年3月4日13点47分