Question:
Date: 18-02-2016 15:24:28
(In Spanish)
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 Votes: 1 - Answers: 2 - Views: 9 Share on: Google Facebook Twitter LinkedIn Link
Problemas con la funcion grid.addItem() [JAVASCRIPT][Resolved]
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 Votes: 1 - Answers: 2 - Views: 9 Share on: Google Facebook Twitter LinkedIn Link
Answers:
-
Date: 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);
Votes: 3 - Link answer -
Date: 19-02-2016 07:12:53 O caramba era el p*** igual de mas
Gracias compañero por su colaboración Votes: 1 - Link answer
To actively participate in the community first must authenticate, enter the system.Sign In