Javascript：canvas，blury图像问题？

时间：2016-10-30 08:23:36

标签： javascript image canvas

所以我正在编写为什么在画布上画出图像的blury 当我按下D键盘时，其他一切正常。我不知道绘制此图像的方式是否有，以及上下文或翻译方法。谢谢你的帮助

＆＃13;
＆＃13; 
var Imagen= { // image to load, and manipulate
	obj: null,
	ruta: null,
	cargar: function() {
		this.obj= new Image();
		//this.obj.src= '/C:/Documents and Settings/casa/Mis documentos/Mis imágenes/sprite.png';
		this.obj.src= 'https://s22.postimg.org/6r8uzrygh/sprite.png';
	},
	ini: [2, 1],
	fin: [22, 38],
	pos: [0, 1],
	auxy: [0, 1],
	vel: {
		des: 0.4,
		som: 0.1
	}
};
var Lienzo= { // this is the canvas
	obj: document.getElementById('lienzo'),
	ancho: 600,
	alto: 300
};
var Sombra= { // this is for the sprites
	fg1: function() {
		Imagen.ini[0]= 2 +48*0; // recortes de la imagen
		Imagen.ini[1]= 1; // recortes de la imagen
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1];
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg2: function() {
		Imagen.ini[0]= 2 +48*1;
		Imagen.ini[1]= 0;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1] -1;
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg3: function() {
		Imagen.ini[0]= 2 +48*2;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1];
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg4: function() {
		Imagen.ini[0]= 2 +48*3;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1];
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg5: function() {
		Imagen.ini[0]= 2 +48*4;
		Imagen.ini[1]= 0;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1] -1;
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg6: function() {
		Imagen.ini[0]= 2 +48*5;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1];
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg7: function() {
		Imagen.ini[0]= 2 +48*6;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1];
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg8: function() {
		Imagen.ini[0]= 2 +48*7;
		Imagen.ini[1]= 0;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1] -1;
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg9: function() {
		Imagen.ini[0]= 2 +48*8;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1];
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg10: function() {
		Imagen.ini[0]= 2 +48*6;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= -Imagen.auxy[0] -22;
		Imagen.pos[1]= Imagen.auxy[1];
		c.save();
		c.translate(0, 0);
		c.scale(-1 ,1);
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
		c.restore();
	},
	fg11: function() {
		Imagen.ini[0]= 2 +48*7;
		Imagen.ini[1]= 0;
		Imagen.pos[0]= -Imagen.auxy[0] -22;
		Imagen.pos[1]= Imagen.auxy[1] -1;
		c.save();
		c.translate(0, 0);
		c.scale(-1 ,1);
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
		c.restore();
	},
	fg12: function() {
		Imagen.ini[0]= 2 +48*8;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= -Imagen.auxy[0] -22;
		Imagen.pos[1]= Imagen.auxy[1];
		c.save();
		c.translate(0, 0);
		c.scale(-1 ,1);
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
		c.restore();
	}
};
var Animar= { // a=65, d=68, w=87, s=83 // izq=37, arr=38, der=39, abj=40 this is for calling the sprites
	S: 0,
	W: 0,
	A: 0,
	D: 0,
	tecla: 0, dir: 83,
	abajo: function() {
		
		if (this.S <= 1) Sombra.fg1();
		else if (this.S <= 2) Sombra.fg2();
		else if (this.S <= 3) Sombra.fg3();
		else if (this.S <= 4) Sombra.fg2();
		
		this.S+= Imagen.vel.som;
		if (this.S > 4) this.S= 0;
	},
	arriba: function() {
		
		if (this.W <= 1) Sombra.fg4();
		else if (this.W <= 2) Sombra.fg5();
		else if (this.W <= 3) Sombra.fg6();
		else if (this.W <= 4) Sombra.fg5();
		
		this.W+= Imagen.vel.som;
		if (this.W > 4) this.W= 0;
	},
	izquierda: function() {
		
		if (this.A <= 1) Sombra.fg7();
		else if (this.A <= 2) Sombra.fg8();
		else if (this.A <= 3) Sombra.fg9();
		else if (this.A <= 4) Sombra.fg8();
		
		this.A+= Imagen.vel.som;
		if (this.A > 4) this.A= 0;
	},
	derecha: function() {
		
		if (this.D <= 1) Sombra.fg10();
		else if (this.D <= 2) Sombra.fg11();
		else if (this.D <= 3) Sombra.fg12();
		else if (this.D <= 4) Sombra.fg11();
		
		this.D+= Imagen.vel.som;
		if (this.D > 4) this.D= 0;
	}
};
var foo= function() {
	c.clearRect(0, 0, 600, 300);
	
	if(Animar.dir == 83) Sombra.fg2();
	if(Animar.dir == 87) Sombra.fg5();
	if(Animar.dir == 65) Sombra.fg8();
	if(Animar.dir == 68) Sombra.fg11();
	
	if(Animar.tecla == 83) {Animar.abajo(); Imagen.auxy[1]+= Imagen.vel.des;}
	if(Animar.tecla == 87) {Animar.arriba(); Imagen.auxy[1]+= -Imagen.vel.des}
	if(Animar.tecla == 65) {Animar.izquierda(); Imagen.auxy[0]+= -Imagen.vel.des *1.5;}
	if(Animar.tecla == 68) {Animar.derecha(); Imagen.auxy[0]+= Imagen.vel.des *1.5;}
	
	requestAnimationFrame(foo);
};
var c= Lienzo.obj.getContext('2d');

Imagen.cargar();
foo();

onkeydown= function(e){Animar.tecla= e.keyCode; Animar.dir=0;};
onkeyup= function(){Animar.dir= Animar.tecla; Animar.tecla= 0;};
＆＃13; 
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body style="background:rgb(57,63,76);color:rgb(190,190,190);">
	<canvas id="lienzo" width="600" height="300" style="background:olivedrab;"></canvas>
	<script src="imagen.js">
	</script>
</body>
</html>
<!-- 
	Imagen
		obj
		ruta
		cargar()
		ini[]
		fin[]
		pos[]
		
	Lienzo
		obj
		ancho
		alto
		
	Sombra
		fg1, fg2, fg3 // abajo
		fg4, fg5, fg6 // arriba
		fg7, fg8, fg9 // izquierda
		fg10,fg11,fg12// derecha
		
	Movimiento
		N
		abajo()
 -->
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

这不是唯一的问题＆＃39; D＆＃39;但它发生在所有图像绘图中。

问题是画布试图在drawImage调用期间平滑您的图像。可以通过将以下属性设置为false来禁用它。

//Following needs to be set to false, as pointed out by Kaiido, prefixed versions are necessary currenlty
c.imageSmoothingEnabled = false;
c.mozImageSmoothingEnabled = false;
c.msImageSmoothingEnabled = false;
c.webkitImageSmoothingEnabled = false;

这里是documentation link from mozilla

禁用平滑图像后看起来没问题。请参阅下面的尝试修改后的脚本。我有代码禁止平滑。

＆＃13;
＆＃13; 
var Imagen= { // image to load, and manipulate
	obj: null,
	ruta: null,
	cargar: function() {
		this.obj= new Image();
		//this.obj.src= '/C:/Documents and Settings/casa/Mis documentos/Mis imágenes/sprite.png';
		this.obj.src= 'https://s22.postimg.org/6r8uzrygh/sprite.png';
	},
	ini: [2, 1],
	fin: [22, 38],
	pos: [0, 1],
	auxy: [0, 1],
	vel: {
		des: 0.4,
		som: 0.1
	}
};
var Lienzo= { // this is the canvas
	obj: document.getElementById('lienzo'),
	ancho: 600,
	alto: 300
};
var Sombra= { // this is for the sprites
	fg1: function() {
		Imagen.ini[0]= 2 +48*0; // recortes de la imagen
		Imagen.ini[1]= 1; // recortes de la imagen
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1];
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg2: function() {
		Imagen.ini[0]= 2 +48*1;
		Imagen.ini[1]= 0;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1] -1;
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg3: function() {
		Imagen.ini[0]= 2 +48*2;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1];
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg4: function() {
		Imagen.ini[0]= 2 +48*3;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1];
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg5: function() {
		Imagen.ini[0]= 2 +48*4;
		Imagen.ini[1]= 0;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1] -1;
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg6: function() {
		Imagen.ini[0]= 2 +48*5;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1];
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg7: function() {
		Imagen.ini[0]= 2 +48*6;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1];
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg8: function() {
		Imagen.ini[0]= 2 +48*7;
		Imagen.ini[1]= 0;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1] -1;
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg9: function() {
		Imagen.ini[0]= 2 +48*8;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= Imagen.auxy[0];
		Imagen.pos[1]= Imagen.auxy[1];
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
	},
	fg10: function() {
		Imagen.ini[0]= 2 +48*6;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= -Imagen.auxy[0] -22;
		Imagen.pos[1]= Imagen.auxy[1];
		c.save();
		c.translate(0, 0);
		c.scale(-1 ,1);
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
		c.restore();
	},
	fg11: function() {
		Imagen.ini[0]= 2 +48*7;
		Imagen.ini[1]= 0;
		Imagen.pos[0]= -Imagen.auxy[0] -22;
		Imagen.pos[1]= Imagen.auxy[1] -1;
		c.save();
		c.translate(0, 0);
		c.scale(-1 ,1);
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
		c.restore();
	},
	fg12: function() {
		Imagen.ini[0]= 2 +48*8;
		Imagen.ini[1]= 1;
		Imagen.pos[0]= -Imagen.auxy[0] -22;
		Imagen.pos[1]= Imagen.auxy[1];
		c.save();
		c.translate(0, 0);
		c.scale(-1 ,1);
		c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
		c.restore();
	}
};
var Animar= { // a=65, d=68, w=87, s=83 // izq=37, arr=38, der=39, abj=40 this is for calling the sprites
	S: 0,
	W: 0,
	A: 0,
	D: 0,
	tecla: 0, dir: 83,
	abajo: function() {
		
		if (this.S <= 1) Sombra.fg1();
		else if (this.S <= 2) Sombra.fg2();
		else if (this.S <= 3) Sombra.fg3();
		else if (this.S <= 4) Sombra.fg2();
		
		this.S+= Imagen.vel.som;
		if (this.S > 4) this.S= 0;
	},
	arriba: function() {
		
		if (this.W <= 1) Sombra.fg4();
		else if (this.W <= 2) Sombra.fg5();
		else if (this.W <= 3) Sombra.fg6();
		else if (this.W <= 4) Sombra.fg5();
		
		this.W+= Imagen.vel.som;
		if (this.W > 4) this.W= 0;
	},
	izquierda: function() {
		
		if (this.A <= 1) Sombra.fg7();
		else if (this.A <= 2) Sombra.fg8();
		else if (this.A <= 3) Sombra.fg9();
		else if (this.A <= 4) Sombra.fg8();
		
		this.A+= Imagen.vel.som;
		if (this.A > 4) this.A= 0;
	},
	derecha: function() {
		
		if (this.D <= 1) Sombra.fg10();
		else if (this.D <= 2) Sombra.fg11();
		else if (this.D <= 3) Sombra.fg12();
		else if (this.D <= 4) Sombra.fg11();
		
		this.D+= Imagen.vel.som;
		if (this.D > 4) this.D= 0;
	}
};
var foo= function() {
	c.clearRect(0, 0, 600, 300);
	
	if(Animar.dir == 83) Sombra.fg2();
	if(Animar.dir == 87) Sombra.fg5();
	if(Animar.dir == 65) Sombra.fg8();
	if(Animar.dir == 68) Sombra.fg11();
	
	if(Animar.tecla == 83) {Animar.abajo(); Imagen.auxy[1]+= Imagen.vel.des;}
	if(Animar.tecla == 87) {Animar.arriba(); Imagen.auxy[1]+= -Imagen.vel.des}
	if(Animar.tecla == 65) {Animar.izquierda(); Imagen.auxy[0]+= -Imagen.vel.des *1.5;}
	if(Animar.tecla == 68) {Animar.derecha(); Imagen.auxy[0]+= Imagen.vel.des *1.5;}
	
	requestAnimationFrame(foo);
};
var c= Lienzo.obj.getContext('2d');

	//Following needs to be set to false, as pointed out by Kaiido, prefixed versions are necessary currenlty
	c.imageSmoothingEnabled = false;
	c.mozImageSmoothingEnabled = false;
	c.msImageSmoothingEnabled = false;
	c.webkitImageSmoothingEnabled = false;

Imagen.cargar();
foo();

onkeydown= function(e){Animar.tecla= e.keyCode; Animar.dir=0;};
onkeyup= function(){Animar.dir= Animar.tecla; Animar.tecla= 0;};
＆＃13; 
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body style="background:rgb(57,63,76);color:rgb(190,190,190);">
	<canvas id="lienzo" width="600" height="300" style="background:olivedrab;"></canvas>
	<script src="imagen.js">
	</script>
</body>
</html>
<!-- 
	Imagen
		obj
		ruta
		cargar()
		ini[]
		fin[]
		pos[]
		
	Lienzo
		obj
		ancho
		alto
		
	Sombra
		fg1, fg2, fg3 // abajo
		fg4, fg5, fg6 // arriba
		fg7, fg8, fg9 // izquierda
		fg10,fg11,fg12// derecha
		
	Movimiento
		N
		abajo()
 -->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题