canvas动画

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Canvas</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <canvas class="myCanvas">
        <p>Add suitable fallback here.</p>
    </canvas>

    <script>
        var canvas = document.querySelector('.myCanvas');
        var width = canvas.width = window.innerWidth;
        var height = canvas.height = window.innerHeight;
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = 'rgb(0,0,0)';
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = 'rgb(0, 0, 0)';
        ctx.beginPath();
        ctx.moveTo(50, 50);
        // 绘制路径
        // ctx.fill();
        // ctx.lineTo(150, 50);
        // var triHeight = 50 * Math.tan(degToRad(60));
        // ctx.lineTo(100, 50 + triHeight);
        // ctx.lineTo(50, 50);
        // ctx.fill();

        // ctx.fillStyle = 'rgb(0, 0, 255)';
        // ctx.beginPath();
        // ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
        // ctx.fill();

        // ctx.fillStyle = 'yellow';
        // ctx.beginPath();
        // ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true);
        // ctx.lineTo(200, 106);
        // ctx.fill();

        // function degToRad(degrees) {
        //     return degrees * Math.PI / 180;
        // };

        // ctx.strokeStyle = 'white';
        // ctx.lineWidth = 1;
        // ctx.font = '36px arial';
        // ctx.strokeText('Canvas text', 50, 50);

        // ctx.fillStyle = 'red';
        // ctx.font = '48px georgia';
        // ctx.fillText('Canvas text', 50, 150);

        // ctx.translate(width / 2, height / 2);

        // function degToRad(degrees) {
        //     return degrees * Math.PI / 180;
        // };

        // function rand(min, max) {
        //     return Math.floor(Math.random() * (max - min + 1)) + (min);
        // }

        // var length = 250;
        // var moveOffset = 20;

        // for (var i = 0; i < length; i++) {
        //     ctx.fillStyle = 'rgba(' + (255 - length) + ', 0, ' + (255 - length) + ', 0.9)';
        //     ctx.beginPath();
        //     ctx.moveTo(moveOffset, moveOffset);
        //     ctx.lineTo(moveOffset + length, moveOffset);
        //     var triHeight = length / 2 * Math.tan(degToRad(60));
        //     ctx.lineTo(moveOffset + (length / 2), moveOffset + triHeight);
        //     ctx.lineTo(moveOffset, moveOffset);
        //     ctx.fill();

        //     length--;
        //     moveOffset += 0.7;
        //     ctx.rotate(degToRad(5));

        // }
        //创建一个动画
        ctx.translate(width / 2, height / 2);

        var image = new Image();
        image.src = 'walk-right.png';
        image.onload = draw;

        var sprite = 0;
        var posX = 0;

        function draw() {
            ctx.fillRect(-(width / 2), -(height / 2), width, height);
            ctx.drawImage(image, (sprite * 102), 0, 102, 148, 0 + posX, -74, 102, 148);
            if (posX % 13 === 0) {
                if (sprite === 5) {
                    sprite = 0;
                } else {
                    sprite++;
                }
            }
            if (posX > width / 2) {
                newStartPos = -((width / 2) + 102);
                posX = Math.ceil(newStartPos / 13) * 13;
                console.log(posX);
            } else {
                posX += 2;
            }
            window.requestAnimationFrame(draw);
        };

    </script>
</body>

</html>
动画图片资源https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/walk-right.png