Canvas 帧动画,绘制图像(drawImage())


demo.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border:1px solid red;
        }
        img {
            display: none;   /* 隐藏img标签,让图像在canvas画布上显示 */  
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
    <img src="./imgs/NPC5.png">
    <script>
        var cvs = document.getElementById('cvs');
        var ctx = cvs.getContext('2d');
        var img = document.querySelector('img');

        img.onload = function() {

            var i = 0;

            setInterval( function() {

                // 绘制新的图像时,需要先清除画布
                ctx.clearRect( 0, 0, cvs.width, cvs.height );

                // 绘图每一帧
                /*
                * 裁剪的x轴,用来控制每一排不同的帧,
                * 裁剪的y轴,用来控制当前行走的方向(也就是绘制那一排)。
                * */
                ctx.drawImage( img,
                    img.width / 4 * i, img.height / 4 * 3, img.width / 4, img.height / 4,
                    10, 10, 200, 200 );

                // i的最大值为3
                if ( ++i >= 4 ) {
                    i = 0;
                }

            }, 200);
        };
    </script>
</body>
</html>

imgs/NPC5.png:




阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页