Hola buenas tardes quería enseñaros mi codigo a ver si me podeis echar una mano.
Lo que intento conseguir es que tengo las 16 fichas del parchis dentro del canvas cada una con su propio nombre y lo que quiero es que al pinchar en una de ella la pueda mover donde yo quiera del tablero que es el bg del canvas, es decir pincho en ficha verde arrastro al numero 2, e conseguido redibujar pero me lo redibuja muchas veces y me hago un lio.
gracias
var fichaa3 = new Image();
fichaa3.onload = function(){
contexto.drawImage(fichaa3,425,428);
}
fichaa3.src = 'images/ficha_azul.png';
(Asi es como dibujo todas las fichas repitiendo el codigo 16 veces )
var actualPos;
var isMove=false;
var canvasLimites=canvas.getBoundingClientRect();
canvas.addEventListener('mousedown',cambiarEstado, false);
canvas.addEventListener('mouseup',cambiarEstado,fa lse);
canvas.addEventListener('mousemove',moverImagen,fa lse);
canvas.style.cursor="hand";
function moverImagen(){
if(isMove){
actualPos=obtenerCoordenadas(event);
// contexto.clearRect(0,0,canvas.width,canvas.height) ;
contexto.drawImage(fichav1,actualPos.x-(fichav1.width/2),actualPos.y-(fichav1.height/2));
}
}
function cambiarEstado(){
isMove=!isMove;
actualPos=obtenerCoordenadas(event);
}
function obtenerCoordenadas(event){
var posX;
var posY;
if (event.pageX || event.pageY) {
posX = event.pageX- canvasLimites.left;
posY = event.pageY- canvasLimites.top;
}
else {
posX = event.clientX - canvasLimites.left;
posY = event.clientY - canvasLimites.top;
}
return {
x:posX,
y:posY
};
}
Esta es la funcion que utilizo para mover pero no hace lo que yo quiero..
