【原生javascript】canvas动画效果

最新推荐文章于 2024-07-21 02:40:53 发布

精灵福将马国成

最新推荐文章于 2024-07-21 02:40:53 发布

阅读量469

点赞数 1

本文链接：https://blog.csdn.net/weixin_42705570/article/details/87625249

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas {
             border: 1px solid red;
        }
    </style>
</head>
<body>
    <p>绘制矩形</p>

    <canvas width="600" height="400"></canvas>

    <script type="text/javascript">

        /*
        
        canvas绘图步骤
        1.先落笔，站到落笔点的坐标
        2.落笔，然后连线
        3.描边

         */

         //获取canves画布
        var canvas =document.querySelector("canvas");

         //获取绘图上下文，
        var ctx=canvas.getContext("2d");

        var x = 0;
        var step = 5;
        var i = 1;
        // 设置定时函数
        setInterval(function() {
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.fillRect(x,100,100,200);

            x += step*i;

            if (x>canvas.width-100) {
                i = -1;
            }else if(x < 0){
                i = 1;
            }
        },100);
     </script>
</body>
</html>