Nueva pregunta

Pregunta:

Fecha: 18-02-2016 15:24:28 (En Español)

Problemas con la funcion grid.addItem() [JAVASCRIPT][Resuelta]

Buenas Tardes tengo un problema con el js

No me agrega una imagen al canvas y no se si sea error de codificacion o por que no llamo la imagen como corresponde o no hago uso adecuado de las funciones

<canvas id="gamepad"></canvas>


function Grid(n) {

	var h; // Altura del area de trabajo
	var w; // Achura del area de trabajo
	var n; // Dimension de la cuadricula
	var gutter; // Separacion entre las lineas de la cuadricula
	var pad; // Area de trabajo en el canvas
	var Hcanvas, Wcanvas // Dimensiones del del area de trabajo
	var screen = document.body.getBoundingClientRect();
	var gamepad = document.getElementById('gamepad');
	var pad = gamepad.getContext('2d');

	if (screen.width <= screen.height) {
		h = screen.width - 4;
		w = screen.width - 4;
	} else {
		h = screen.height - 4;
		w = screen.height - 4;
	}

	gamepad.setAttribute('height', h + 'px');
	gamepad.setAttribute('width', w + 'px');

	var area = gamepad.getBoundingClientRect();

	Hcanvas = gamepad.getAttribute('height');
	Wcanvas = gamepad.getAttribute('width');

	sepY = gamepad.height / n;
	sepX = gamepad.height / n;

	this.generate = function() {
		for (var i = 0; i <= n; i++) {
			pad.beginPath();
			pad.moveTo(sepY*i, 0);
			pad.lineTo(sepX*i, h);
			pad.moveTo(0, sepY*i);
			pad.lineTo(w, sepY*i);
			pad.strokeStyle = "#000000";
			pad.stroke();
			pad.closePath();
		}
	}

	this.position = function() {
		gamepad.addEventListener('click', function(e) {
			console.log(
				(Math.floor((e.clientY / gamepad.height) * n) + 1) + ',' + (Math.floor((e.clientX / gamepad.width) * n) + 1)
			);
		}, false);
	}

	this.addItem = function(item,posX,posY) {
		var img = new Image();
		img.onload = function() {
			pad.drawImage = (img, posX, posY, sepX,sepY);
		};
		img.src = imageSrc(item);
		console.log(img.src);
		console.log(posX);
		console.log(posY);
		console.log(sepX);
		console.log(sepY);
	}
}

function imageSrc(img) {
   switch (img) {
      case 'bishop': // Alfin
         src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Chess_bgt45.svg/120px-Chess_bgt45.svg.png';
      break;

      case 'king': // Rey
         src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_pgt45.svg/120px-Chess_pgt45.svg.png';
      break;

      case 'horse': // Caballo
         src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Chess_ngt45.svg/120px-Chess_ngt45.svg.png';
      break;

      case 'queen': // Reina
         src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Chess_kgt45.svg/120px-Chess_kgt45.svg.png';
      break;

      case 'rook': // Torre
         src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Chess_rgt45.svg/120px-Chess_rgt45.svg.png';
      break;

      case 'pawn': // Peon
         src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_pgt45.svg/120px-Chess_pgt45.svg.png';
      break;

      default: // Error
         src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Chess_xxt45.svg/120px-Chess_xxt45.svg.png';
      break;
   }
   return src;
}

grid = new Grid(8);
document.addEventListener('load', grid.generate());
grid.position();
grid.addItem('queen',0,0);


Ejemplo en vivo
Etiquetas: Array Javascript - HTML5 - HTML5 canvas - Javascript - Javascript JSON - JSON - POO - Pregunta Votos: 1 - Respuestas: 2 - Vistas: 9 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 19-02-2016 06:21:44 Creo que la falla esta acá: (probado en el http://codepen.io/ y funciona)
    this.addItem = function(item,posX,posY) {
            var img = new Image();
            img.onload = function() {
                pad.drawImage(img, posX, posY, sepX,sepY);
            };
            img.src = imageSrc(item);
            console.log(img.src);
            console.log(posX);
            console.log(posY);
    
      Votos: 3 - Link respuesta
     
  • Fecha: 19-02-2016 07:12:53 O caramba era el p*** igual de mas
    Gracias compañero por su colaboración
      Votos: 1 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com