Cómo cargar imágenes en lienzo
lt;scriptgt;
? var Persona = función(lienzo){
this.ctx = document.querySelector("lienzo").getContext(" 2d");
this.canvasWidth = this.ctx.canvas.width;
this.canvasHeight = this.ctx.canvas.height;
esto .src = "image/04.png";
this.init();
}
? {
var that = this;
this.loadImage(function(image){
? // Obtener el ancho y alto de la imagen
? that.imageWidth = image.width;
? that.imageHeight = image.height
// Obtener el ancho y el alto de un solo área de monstruo
? that.positionWidth = that.imageWidth / 4;
? that.positionHeight = that.imageHeight / 4; // El valor predeterminado se muestra desde la esquina superior izquierda
? that.x0 = that.canvasWidth / 2 - that.positionWidth / 2; 2;
? // Dibujar una imagen
? that.ctx.drawImage(imagen, 0, 0, that.positionWidth, that.positionHeight, that.x0,
that.y0, that.positionWidth, that.positionHeight);
})
}
? (devolución de llamada){
var image = new Image();
// Ejecutado después de cargar la imagen
image.onload = function(){
? devolución de llamada amp ;amp; devolución de llamada(imagen);
}
image.src = this.src;
}
var persona = nueva persona(); p> 3. Dibuja la animación del cuadro de la personita caminando
lt; slt;
var Person = function(canvas){
? .ctx = document.querySelector("canvas").getContext("2d");
? this.canvasWidth = this.ctx.canvas.width;
? = este .ctx.canvas.height;
? this.src = "imagen/04.png"
? }
Persona.prototype.init = función(){
? var eso = esto
? p>
// Obtener el ancho y alto de la imagen
that.imageWidth = image.width
that.imageHeight = image.height
<; p> // Obtener el ancho y alto de un área de monstruo únicathat.positionWidth = that.imageWidth / 4;
that.positionHeight = that.imageHeight / 4; p>
// El valor predeterminado es mostrar desde la esquina superior izquierda
that.x0 = that.canvasWidth / 2 - that.positionWidth / 2
that.y0; = that.canvasHeight / 2 - that.positionHeight / 2;
// Dibujar una imagen
that.ctx.drawImage(image, 0, 0, that.positionWidth, that. positionHeight, that.x0,
? that.y0, that.positionWidth, that.positionHeight
var index =
setInterval(función( ){
? ese .ctx.clearRect(0, 0, ese.canvasWidth, ese.canvasHeight);
> ? index;
? that.ctx.drawImage(imagen, index * that.positionWidth, 0, that.positionWidth, that.positionHeight, that.x0, that.y0,lt;brgt; that. positionWidth, that.positionHeight);
? > }, 100);
})
}
Persona.prototipo.loadImage = función(devolución de llamada){
? var image = new Image();
? // Ejecutado después de cargar la imagen
? image.onload = function(){
devolución de llamada amp; amp ; devolución de llamada (imagen);
? }
? imagen.src = this.src; new Person();
lt;/scriptgt;
4. Dibuja un pequeño monstruo corriendo
Puedes controlar al villano en el lienzo a través de la parte superior. , teclas abajo, izquierda y derecha del teclado Caminar a voluntad
nction(canvas){
this.ctx = document.querySelector("canvas").getContext("2d" );
this.canvasHeight = this.ctx.canvas.width;
this.canvasHeight = this.ctx.canvas.height
this.stepX; = 0;
este .stepY = 0;
este.stepSize = 10
este.index = 0; .dirección = 0;
this.src = "imagen/04.png"
this.init()
}
? Persona.prototype.init = función (){
var eso = esto;
this.loadImage(función(imagen){
? // Obtener el ancho y alto de la imagen
?
th = image.width;
? that.imageHeight = image.height;
? // Obtener el ancho y alto de un área de monstruo única
? that.positionWidth = that.imageWidth / 4;
? that.positionHeight = that.imageHeight / 4; // El valor predeterminado es mostrar desde la esquina superior izquierda
p>? that.x0 = that.canvasWidth / 2 - that.positionWidth / 2;
?
? // Dibujar una imagen
? that.ctx.drawImage(imagen, 0, 0, that.positionWidth, that.positionHeight, that.x0,
that. y0, that.positionWidth, that.positionHeight);
? var index = 0
? document.onkeydown = function(e){
eso. ctx.clearRect(0, 0, that.canvasWidth, that.canvasHeight);
switch(e.keyCode){
caso 37:
consola? .log('left' );
that.direction = 1;
that.stepX--;
that.showImage(imagen); p>
ruptura ;
? caso 38:
console.log('upper');
that.direction = 3;
eso. pasoY--;
that.showImage(imagen);
descanso
? > console.log(' Derecha');
that.direction = 2;
that.stepX
that.showImage(imagen); p>
romper;
? caso 40:
console.log('down');
that.direction = 0; .stepY;
that.showImage(imagen);
romper
}
}
})
? }
? Persona.prototype.loadImage = función(devolución de llamada){
var imagen = nueva imagen();
// Ejecutado después de cargar la imagen
image.onload = function(){
? callback amp; }
imagen.src = this.src;
}
? > this.index;
console.log(this.index);
? this.ctx.drawImage(imagen, this.index * this.positionWidth, this.direction * this . positionHeight, this.positionWidth, this.positionHeight, this.x0 this.stepX * this.stepSize, this.y0 this.stepY * this.stepSize, this.positionWidth, this.positionHeight
? si (este.index >= 3){
this.index = 0;
}
}
var? persona = nueva Persona();
lt;/scriptgt;
Construcción del sitio web de Shenzhen www.sz886.com