JavaScript-在画布上让物体移动

最新推荐文章于 2022-11-28 20:22:55 发布

梧桐下的四叶草

最新推荐文章于 2022-11-28 20:22:55 发布

阅读量4.3k

点赞数 4

分类专栏： JavaScript 文章标签： canvas javascript html

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/51626356

版权

（一）在页面上移动 Canvas Animation var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var positi

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

（一）在页面上移动

<html>
    <head>
    <title>Canvas Animation</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
    <canvas id="canvas" width="200" height="200"></canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var position = 0;
            //定时器函数第一个参数是要执行的函数
            //第二个参数是每隔多少分钟执行一次函数
            setInterval(function(){
                //清除出一个矩阵
                ctx.clearRect(0,0,200,200);
                //填充矩阵
                ctx.fillRect(position,0,20,20);
                position++;
                if(position>200){
                    position=0;
                }
            },30);
        </script>
    </body>
</html>

（二）对方块的大小实现动画

<html>
    <head>
    <title>Canvas Animation</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
    <canvas id="canvas" width="200" height&

最低0.47元/天解锁文章

梧桐下的四叶草

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
JavaScript-在画布上让物体移动

（一）在页面上移动 Canvas Animation var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var positi
复制链接

扫一扫