使用canvas完成帧动画(方向键控制行走的小人)
作者:互联网
根据此精灵图设置动图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
margin: 100px auto;
position: relative;
}
</style>
</head>
<body> <canvas width="600" height="400" style="border: 1px solid gray;"></canvas>
<script>
var Persion = function (ctx) {
this.ctx = ctx || document.querySelector('canvas').getContext('2d');
this.src = "../img/03.png";
//获取画布大小
this.canvasWidth = this.ctx.canvas.width;
this.canvasHeight = this.ctx.canvas.height;
// 行走参数
this.stepSzie = 10;
// 0 前 1 左 2 右 3 后
this.direction = 0;
this.stepX = 0;
this.stepY = 0;
this.init();
}
Persion.prototype.init = function () {
var that = this;
/*1.加载图片*/
this.loadImage(function (image) {
/*图片的大小*/
that.imageWidth = image.width;
that.imageHeight = image.height;
/*人物的大小*/
that.personWidth = that.imageWidth / 4;
that.personHeight = that.imageHeight / 4;
/*绘制图片的起点*/
that.x0 = that.canvasWidth / 2 - that.personWidth / 2;
that.y0 = that.canvasHeight / 2 - that.personHeight / 2;
/*2.默认绘制在中心位置正面朝外*/
that.ctx.drawImage(image,
0,0,
that.personWidth,that.personHeight,
that.x0,that.y0,
that.personWidth,that.personHeight);
// 通过方向键控制人物行走
that.index = 0;
document.onkeydown = function (e) {
if (e.keyCode == 40) {
that.direction = 0;
that.stepY++;
that.drawImage(image);
/*前*/
} else if (e.keyCode == 37) {
that.direction = 1;
that.stepX--;
that.drawImage(image);
/*左*/
} else if (e.keyCode == 39) {
that.direction = 2;
that.stepX++;
that.drawImage(image);
/*右*/
} else if (e.keyCode == 38) {
that.direction = 3;
that.stepY--;
that.drawImage(image);
/*后*/
}
}
})
}
Persion.prototype.loadImage = function (callback) {
var image = new Image();
image.onload = function () {
callback && callback(image);
}
image.src = this.src;
}
Persion.prototype.drawImage = function (image) {
this.index++;
// 清除画布
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
// 定位到x 索引
// y方向
this.ctx.drawImage(image,
this.index * this.personWidth, this.direction * this.personHeight,
this.personWidth, this.personHeight,
this.x0 + this.stepX * this.stepSzie, this.y0 + this.stepY * this.stepSzie,
this.personWidth, this.personHeight);
/*如果索引超出了 变成0*/
if (this.index >= 3) {
this.index = 0;
}
}
new Persion()
</script>
</body>
</html>
标签:function,动画,canvas,方向键,drawImage,image,ctx,personHeight,personWidth 来源: https://blog.csdn.net/qq_41961239/article/details/111473915