Pregunta:
Fecha: 18-02-2016 15:24:28
(En Español)
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
Ejemplo en vivo Votos: 1 - Respuestas: 2 - Vistas: 9 Compartir en: Google Facebook Twitter LinkedIn Link
Problemas con la funcion grid.addItem() [JAVASCRIPT][Resuelta]
Buenas Tardes tengo un problema con el jsNo 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 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
