h5 canvas 小球移動
h5 canvas 小球移動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> $().ready(function () { var d=$("#cans").get(0).getContext("2d"); var dir=0; var width=500; var height=200; var exp=1; //像素移動的位置，正數向下，負數向上 function test(){ // $("#res").get(0).innerText+=123; d.clearRect(0,0,width,height)//清除原始圖形 // 畫圓 d.fillStyle="red"; d.beginPath(); // 從新開始畫，防止 衝突重疊 d.arc(50,dir,20,0,Math.PI*2,true); // x y 坐標 半徑130 // d.arc(50,dir,dir,0,Math.PI*2,true); // 半徑為dir 也慢慢變大 d.closePath(); // 結束畫布，防止衝突重疊 d.fill(); // 結束渲染 dir+=exp; // 上下移動 if(dir==0 || dir==height){ exp*=-1; } } var tt; $("#bt1").bind('click', function () { tt=setInterval(test,20); }); $("#bt2").bind('click', function () { clearInterval(tt); }) }); </script> </head> <body> <canvas id="cans" width="500" height="200">瀏覽器不支持canvas</canvas> <div id="res"></div> <button id="bt1">開始</button> <button id="bt2">停止</button> </body> </html>
