js+canvas(H5)实现小球移动小demo

*canvas提供画布，大小自定义，js得到画布，从画布对象通过getContext('2d')来得到画笔，然后就可以开始画了

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MoveDemo</title>
    <script type="text/javascript">
             //注意，此句必须放在方法外边作为全局变量，如果放在方法内部，就会犯下和我一样的错误，导致小球始终无法移动，找了好久都没找到问题。
             var dir=0;
             //词句也需要放到外边，否则会出现方向无法改变的窘况。
　　　　　　   var exp = 3;
            function test(){
               
                //该句需要放到方法里边，因为要实时刷新得到画布
                var d=document.getElementById("cans").getContext("2d");;
                var width=500;
                var height=300;
                //实时刷新当前时间，由于是测试，没有调整格式
                document.getElementById("res").innerHTML=new Date();
               //清空画布方法clearRect()
                d.clearRect(0,0,width,height)
                //指定画笔颜色
                d.fillStyle="red";
                //画线条，图形等之前的通用方法，告诉浏览器要开始了。
                d.beginPath(); 
                //画圆弧，指定了2pi代表画圆
                d.arc(50,dir,30,0,Math.PI*2,true); 
                //闭合路径
                d.closePath();
                //刷新画布
                d.fill();
                //朝着y正方向移动
                dir += exp;
                //碰到边界改变方向
                if( dir==0||dir==height)
                      exp=-exp;
            }
            var tt;
            function b(){
            //setinterval(func,mills)方法提供了y移动的主要支持
            tt=setInterval("test()",100);
             }
            function c(){
            //清空setinterval()指定的时时刷新
            clearInterval(tt);
             }
    </script>
</head>
<body >
<canvas id="cans" width="500px" height="300px" style="border:1px solid red;">浏览器不支持canvas</canvas>
<div id="res"></div>
<button id="bt1" onclick="b()">begin</button>
<button id="bt2" onclick="c()">stop</button></button>
</body>
</html>

　　

posted @ 2018-01-26 13:07  漂渡  阅读(976)  评论(0)  编辑  收藏  举报