js 动画了解一下（前端）

最新推荐文章于 2023-09-21 08:00:19 发布

better body

最新推荐文章于 2023-09-21 08:00:19 发布

阅读量301

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wqewq19/article/details/81666586

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动画</title>
    </head>
    <body>
        <canvas class="isCanvas"></canvas>
        <script>
            var canvas = document.querySelector('.isCanvas');
            var ctx  = canvas.getContext('2d');

            var width = canvas.width = window.innerWidth;
            var height = canvas.height = window.innerHeight;



            var image = new Image();
            image.src = 'img/walk-right.png';

            ctx.beginPath();
            ctx.fillStyle='rgb(0,0,0)';
            ctx.fillRect(0,0,width,height);

            image.onload = draw;

            //平移画布
            ctx.translate(width/2,height/2);

            var posX = 0; 
            var startX=0;

            function draw(){

                ctx.fillStyle='rgb(0,0,0)';
                ctx.fillRect(-width/2,0,width,height);
                ctx.drawImage(image,posX*102,0,102,image.height,startX,0,102,image.height);



                if(startX%13===0){
                    if(posX>4){
                    posX = 0;
                }else{
                    posX++;
                }

                }

                if(startX>width/2){
                    startX=- width/2-102;
                }else{
                    startX+=2;
                }


                requestAnimationFrame(draw);

            }


        </script>
    </body>
</html>

这里写图片描述

资源图片这里写图片描述

better body

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 动画了解一下（前端）

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动画&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canv
复制链接

扫一扫