用canvas实现方块走口子

最新推荐文章于 2023-12-28 10:00:00 发布

Future_object

最新推荐文章于 2023-12-28 10:00:00 发布

阅读量306

点赞数

分类专栏： js 文章标签： canvas

本文链接：https://blog.csdn.net/qq_39634880/article/details/80375243

版权

js 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{background: #ccc;}
        #oc{background: #fff;}
    </style>
</head>
<body>
<!--canvas 设置宽高需要在 html的属性中-->
<canvas id="oc" width="400" height="400">浏览器不支持该标记！</canvas>
<script>
    //获取画板
    var oC = document.getElementById('oc');
    //设置画板的2d效果
    var oGC = oC.getContext('2d');
    //方块移动
    var x = 0;//x轴起始的位置
    var y = 0;//y轴起始位置
    oGC.fillRect(0,0,50,50);
    var timer = null;//定时器初始化
    timer = setInterval(function(){
        //清除画布
        oGC.clearRect(0,0,oC.width,oC.height);
        if(x<350 && y==0 ){//上边
            x++;
        }else if(x>=350 &&  y<350){//右边
            x=350;
            y++;
        }else if(x<=350 && x>0 && y==350){//下边
            x--;
            y=350;
        }else if(x==0 && y<=350){//左边
            x=0;
            y--;
        }
        //画方块
        oGC.fillRect(x,y,50,50);
    },1);
</script>
</body>
</html>