Canvas绘制鱼儿游水动画-CFANZ编程社区

Canvas绘制鱼儿游水动画

实现一个canvas绘图的鱼儿游水动画，绘图的原理为通过定时器绘制图片不同的位置实现动画的效果。

以下是动画效果：

Canvas绘制鱼儿游水动画_Canvas

以下是代码实现：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Canvas绘制鱼儿游水动画</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background: black;
        }

        canvas {
            background: white;
        }
    </style>
</head>

<body>

    <canvas width=500 height=500 id='canvas'>
        您的浏览器版本过低，请更新浏览器
    </canvas>

    <script type="text/javascript">

        var obj = canvas.getContext('2d');
        var img = new Image();

        var i = 0;
        var a = 0;
        img.onload = function () {

            setInterval(function () {
                obj.beginPath();
                //控制小鱼游的行程
                a++;
                obj.clearRect(0, 0, canvas.width, canvas.height);
                obj.stroke();

                //控制图片切换位置
                if (i == 4) {
                    i = 0
                };

                obj.beginPath();
                //参数(对象,x位置,y位置,图实际宽,图实际高,X轴,Y轴,要绘制图宽,要绘制图高)
                obj.drawImage(img, 0, 37 * i, 55, 37, 100 + a * 1.213, 100, 55, 37);
                i++;
                obj.stroke();
            }, 100);

        };
        img.onerror = function () {
            alert(1);
        }
        img.src = 'images/fish.png';

    </script>
</body>

</html>

0 条评论