用Canvas写一个行走的小动画

最新推荐文章于 2021-04-27 04:15:50 发布

R511

最新推荐文章于 2021-04-27 04:15:50 发布

阅读量247

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Webghost511/article/details/98769762

版权

web 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            *{
                padding: 0;
                margin: 0;
            }
            canvas{
                border: 1px blueviolet solid;
            }
            body{
                /* background-color: black; */
                overflow: hidden;
            }
        </style>
</head>
<body>
    <canvas></canvas>
    <script type="text/javascript">

        var mycanvas = document.querySelector('canvas');
        var ctx=mycanvas.getContext('2d')
        //设置画布满屏
        mycanvas.width=document.documentElement.clientWidth;
        mycanvas.height=document.documentElement.clientHeight;
        //创建一个节点
        var img =new Image();
        var step=0;
        var x =100;
        img.src='img/movie.jpg' //500 462
        img.onload=function(){  //图片一定要在这个onload中再渲染
            setInterval(() => {
                ctx.clearRect(0,0,mycanvas.width,mycanvas.height)//清空画布
                step++;
                if(step>3){
                    step=0;
                }
                x+=20;
                if(x>mycanvas.width){
                    x=0;
                }
                ctx.drawImage(img,125*step,115*2,125,125,x,100,125,125)
            },200);
           
        }

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

R511

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Canvas写一个行走的小动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
复制链接

扫一扫

专栏目录