HTML5交互动画开发历次作业(二)
程序员文章站
2022-07-06 20:31:12
...
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的话行走的人会走一会儿消失一会儿
所用到的图片素材：