canvas标签实现动态小球

Html5 canvas标签实现动态小球
话不多说，直接上代码

<canvas id="mycanvas" width="500" height="500" style="border:1px solid red">不支持H5</canvas>//canvas标签
<div id="div"></div> //定义一个显示效果的层div
//定义两个按钮，实现小球的动与停功能
<button id="btn1" onclick="colse=setInterval(drawBall,100)">开始</button>
<button id="btn2" onclick="clearInterval(colse)">结束</button>
<script type="text/javascript">
    var a=document.getElementById("mycanvas");
    var cxt=a.getContext("2d");
    //定义一个球类
    var ball={x:10,y:100,dir_x:10,dir_y:5};

    function drawBall(){
        //画圆
        cxt.beginPath();
        cxt.fillStyle="green";
        cxt.arc(ball.x,ball.y,10,0,Math.PI*2);
        cxt.fill();//清除渲染
    //球动起来
    //ball.dir_x += Math.random()*2; //可实现小球不规则运动
    ball.x+=ball.dir_x;    //控制x轴方向
    //ball.dir_y += Math.random()*2;
    ball.y+=ball.dir_y;     //控制y轴方向
    //判断小球运动方向
    if(ball.x<0 || ball.x>500){
        ball.dir_x*=-1;
        }
    if(ball.y<0 || ball.y>500){
        ball.dir_y*=-1;
        }
        }           
</script>

实现动态小球的重要函数在于setInterval(code,time)，这个方法实现不停调用第一个参数的方法，间隔时间为第二个参数（毫秒）。clearInterval()函数则可以关闭setInterval()方法，实现暂停功能。
第一次写博客，希望可能帮到你！
2016年11月29号