HTML5交互动画开发历次作业(二)

最新推荐文章于 2022-06-04 12:02:40 发布

zb_tjw

最新推荐文章于 2022-06-04 12:02:40 发布

阅读量1.3k

点赞数 2

分类专栏：滨院

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_32239767/article/details/80242898

版权

滨院专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.面向对象思路的鱼游动和修改自己之前的作业
（1）：
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <title>动画6</title>
    <meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="800" height="374" style="border:solid">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var image = new Image();
    var image2 = new Image();
    var image3 = new Image();
    var image4 = new Image();
    var background = new Image();
    background.src = "海底.png";
    image.src = "鱼动画.png";
    image2.src = "鱼动画2.png";
    image3.src = "鱼动画3.png";
    image4.src = "鱼动画4.png";
    image4.onload = function () {
        var fish1 = new Fish(image, -200, 20, 201, 148);
        var fish2 = new Fish(image2, 20, 200, 200, 173);
        var fish3 = new Fish(image3, 240, 50, 200, 186);
        var fish4 = new Fish(image4, 480, 110, 200, 170);
        var text = new ShowText("欢迎来到海底世界！", 200, 200, 60);

        setInterval(function() {
            context.clearRect(0, 0, 800, 374);
            context.drawImage(background, 0, 0);

            fish1.draw(context);
            fish2.draw(context);
            fish3.draw(context);
            fish4.draw(context);

            text.draw(context);
        }, 1000 / 60);
    };

    var Fish = function (image, x, y, width, height) {
        this.image = image;
        this.x = x;
        this.y = y;
        this.averageY = y;
        this.width = width;
        this.height = height;
        this.frm = 0;
        this.dis = 0;
        this.velocity = 2;
        this.disV = 0;
    };
    Fish.prototype.draw = function (ctx) {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.drawImage(this.image, 0, this.frm * this.height, this.width, this.height, 0, 0, this.width, this.height);
        ctx.restore();

        this.x += this.velocity;

        this.disV++;
        if (this.disV >= 90) {
            this.velocity = 1 + 2 * Math.random();
        }

        if (this.x >= 800) {
            this.x = -200;
        }

        this.y = this.averageY + 50 * Math.sin(Math.PI / 100 * this.x);

        this.dis++;
        if (this.dis >= 20) {
            this.dis = 0;
            this.frm++;
            if (this.frm >= 4) this.frm = 0;
        }
    };

    var ShowText = function (string, x, y, time) {
        this.string = string;
        this.beginY = y - 300;
        this.x = x;
        this.y = y;
        this.time = time;
    };
    ShowText.prototype.draw = function (ctx) {
        if (this.time >= 0) {
            this.time--;
        } else {
            context.save();
            context.font = "50px Arial";
            context.translate(this.x, this.beginY);
            context.fillText(this.string, 0, 0);
            context.restore();

            if (this.beginY <= this.y) {
                this.beginY += 2;
            }
        }
    };
</script>
</body>
</html>

（2）：接自己之前的作业的修改
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <title>week10</title>
    <meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="800" height="374" style="border:solid">
    你的浏览器不支持canvas画布元素，请更新浏览器获得演示效果。
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var image = new Image();
    var image3 = new Image();
    var background = new Image();
    background.src = "back.jpg";
    image.src = "aaa.png";
    image3.src = "ccc.png";
    image.onload = function () {
        var man1 = new Man(image, 0, 75, 100, 300);
        var man3 = new Man(image3, -300, 75, 73, 300);
        var text = new ShowText("Wait Me！", 260, 200, 25);

        setInterval(function() {
            context.clearRect(0, 0, 800, 374);
            context.drawImage(background, 0, 0, 650, 488, 0, 0, 800, 374);

            man1.draw(context);
            man3.draw(context);

            text.draw(context);
        }, 1000 / 10);
    };

    var Man = function (image, x, y, width, height) {
        this.image = image;
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.frm = 0;
    };
    Man.prototype.draw = function (ctx) {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.drawImage(this.image, this.frm * this.width, 0, this.width, this.height, 0, 0, this.width, this.height);
        ctx.restore();
		
		this.frm++;
            if (this.frm >= 6) this.frm = 0;
            this.x += 10;//可以适当的配合下边的时间间隔调整这里，效果会非常好
            if (this.x >= 800) {//超出画布后就重新开始
                this.x = 0;
            }
    };

    var ShowText = function (string, x, y, time) {
        this.string = string;
        this.beginY = y - 300;
        this.x = x;
        this.y = y;
        this.time = time;
    };
    ShowText.prototype.draw = function (ctx) {
        if (this.time >= 0) {
            this.time--;
        } else {
            context.save();
            context.font = "50px Arial";
            context.translate(this.x, this.beginY);
            context.fillText(this.string, 0, 0);
            context.restore();

            if (this.beginY <= this.y) {
                this.beginY += 20;
            }
        }
    };
</script>
</body>
</html>

写博客的时候发现一个问题this.frm >= 6；这句代码后边的6只能保证行走的人显示完全，但是不能保证奔跑的人显示完全，因为两张图片上的人物数量是不一样的，所以这里也只能写6了，如果写8的话行走的人会走一会儿消失一会儿
所用到的图片素材：
这里写图片描述

zb_tjw

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
5
评论
HTML5交互动画开发历次作业(二)

1.面向对象思路的鱼游动和修改自己之前的作业（1）： &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;动画6&lt;/title&gt; &lt;meta charset="utf-8"&gt;&lt;/head&gt;&lt;body&gt;&
复制链接

扫一扫