你的位置:首页 > 网页设计

[网页设计]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>