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

最新推荐文章于 2022-12-19 18:03:09 发布

boonyaxnn

最新推荐文章于 2022-12-19 18:03:09 发布

阅读量1k

点赞数

分类专栏： canvas 面向对象

本文链接：https://blog.csdn.net/boonyaxnn/article/details/90270327

版权

该博客介绍了如何使用HTML5 Canvas创建一个小球，并使其在画布中左右移动。通过判断小球位置，当小球达到画布右侧时，会清空画布并反向移动至左侧，形成来回移动的效果。

摘要由CSDN通过智能技术生成

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轴不断增加&