Canvas 创建一个小球，并且可以在画布里来回移动

1、获取页面元素，并关联上下文；

 var canvas=document.getElementById('canvas');
 var ctx=canvas.getContext('2d');

2、 当小球到底画布的最右侧，则清空画布；（x >=canvas.width+20），+20是小球完全走出页面；-20就是小球在画布的最右侧

        var x=100;
        var timer=setInterval(function(){
            //清空画布  清空上一个动画 
            ctx.clearRect(0,0,canvas.width,canvas.height);
            x+=10;
            if(x >=canvas.width+20){//小球到达最右侧
               //停止运动
                clearInterval(timer);
            }
            ctx.beginPath();
            ctx.arc(x,100,20,0,2*Math.PI,false);
            ctx.fillStyle='pink';
            ctx.fill();

        },50)

3、当小球到达最右侧 ，即x >=canvas.width-20时，让其原路返回。

     我们可以定义一个开关，当开关打开的时候x轴不断增加&