Canvas绘制鱼儿游水动画

aiguangyuan

已于 2022-07-20 16:57:51 修改

阅读量1.4k

点赞数 1

分类专栏： HTML 文章标签：前端开发 HTML Canvas

于 2019-06-26 06:44:18 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/93708607

版权

HTML 专栏收录该内容

35 篇文章 4 订阅

订阅专栏

实现一个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>