在canvas画布中如何加载图⽚<script>
var Person = function(canvas){
< = document.querySelector("canvas").getContext("2d");
this.canvasWidth = anvas.width;
this.canvasHeight = anvas.height;
this.src = "image/04.png";
this.init();
}
Person.prototype.init = function(){
var that = this;
this.loadImage(function(image){
/
/ 获取图⽚的宽⾼
that.imageWidth = image.width;
that.imageHeight = image.height;
// 获取单个⼩怪兽区域的宽⾼
that.positionWidth = that.imageWidth / 4;
that.positionHeight = that.imageHeight / 4;
// 默认是从左上⾓显⽰的
that.x0 = that.canvasWidth / 2 - that.positionWidth / 2;
that.y0 = that.canvasHeight / 2 - that.positionHeight / 2;
// 绘制图⽚
that.y0, that.positionWidth, that.positionHeight);
})
}
Person.prototype.loadImage = function(callback){
var image = new Image();
// 图⽚加载完成后执⾏
callback && callback(image);
}
image.src = this.src;
}
var person = new Person();
</script>
三、绘制⼩⼈⾏⾛的帧动画
<s<script>
var Person = function(canvas){
< = document.querySelector("canvas").getContext("2d");          this.canvasWidth = anvas.width;
this.canvasHeight = anvas.height;
this.src = "image/04.png";
this.init();
}
Person.prototype.init = function(){
var that = this;
this.loadImage(function(image){
// 获取图⽚的宽⾼
that.imageWidth = image.width;
that.imageHeight = image.height;
// 获取单个⼩怪兽区域的宽⾼
that.positionWidth = that.imageWidth / 4;
that.positionHeight = that.imageHeight / 4;
// 默认是从左上⾓显⽰的
that.x0 = that.canvasWidth / 2 - that.positionWidth / 2;
that.y0 = that.canvasHeight / 2 - that.positionHeight / 2;
/
/ 绘制图⽚
that.y0, that.positionWidth, that.positionHeight);
var index = 0;
setInterval(function(){
index++;
if(index >= 3){
index = 0;
}
}, 100);
})
}
Person.prototype.loadImage = function(callback){
var image = new Image();
// 图⽚加载完成后执⾏
callback && callback(image);
}
image.src = this.src;
}
var person = new Person();
</script>
四、绘制疾⾛的⼩怪兽
canvas动画  可以通过键盘上下左右键控制⼩⼈在画布中任意⾏⾛
nction(canvas){
< = document.querySelector("canvas").getContext("2d");
this.canvasWidth = anvas.width;
this.canvasHeight = anvas.height;
this.stepX = 0;
this.stepY = 0;
this.stepSize = 10;
this.index = 0;
this.direction = 0;
this.src = "image/04.png";
this.init();
}
Person.prototype.init = function(){
var that = this;
this.loadImage(function(image){
// 获取图⽚的宽⾼
that.imageWidth = image.width;
that.imageHeight = image.height;
/
/ 获取单个⼩怪兽区域的宽⾼
that.positionWidth = that.imageWidth / 4;
that.positionHeight = that.imageHeight / 4;
// 默认是从左上⾓显⽰的
that.x0 = that.canvasWidth / 2 - that.positionWidth / 2;
that.y0 = that.canvasHeight / 2 - that.positionHeight / 2;
// 绘制图⽚
var index = 0;
switch(e.keyCode){
case 37 :
console.log('左');
that.direction = 1;
that.stepX--;
that.showImage(image);                break;
case 38 :
console.log('上');
that.direction = 3;
that.stepY--;
that.showImage(image);                break;
case 39 :
console.log('右');
that.direction = 2;
that.stepX++;
that.showImage(image);                break;
case 40 :
console.log('下');
that.direction = 0;
that.stepY++;
that.showImage(image);                break;
}
}
})
}

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。