Foros del Web » Creando para Internet » HTML »

canvas posicion de imagenes

Estas en el tema de canvas posicion de imagenes en el foro de HTML en Foros del Web. hola que tal espero que esten bien lo que pasa es que estoy creando un avatar en canvas pero tendo un peuqeño prolema, primero coloco ...
  #1 (permalink)  
Antiguo 27/09/2012, 13:25
 
Fecha de Ingreso: septiembre-2012
Mensajes: 12
Antigüedad: 7 años
Puntos: 0
Exclamación canvas posicion de imagenes

hola que tal espero que esten bien lo que pasa es que estoy creando un avatar en canvas pero tendo un peuqeño prolema, primero coloco el cuerpo del avatar luego le inserto los ojos pero si quiero cambiarle el cuerpo los ojos se me colocan debajo del cuerpo y no se me miran como ago que se me mantengan los ojos cuando coloco o cambio el cuerpo este es el codigo espero su ayuda
var canvas;
var context;
var images = {};
var x = 245;
var y = 185;
var breathAmt = 0;
var hair1;
///////////*********************************/////////////////
function prepareCanvas(canvasDiv, canvasWidth, canvasHeight){
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
context = canvas.getContext("2d");

hair1=document.getElementById("hair");
//PRIMERA PARTE DE LAS IMAGENES
cargaImagen("leftArm");
cargaImagen("legs");
cargaImagen("torso");
cargaImagen("rightArm");
cargaImagen("head");
cargaImagen('hair');
//SEGURNDA PARTE DE LAS IMAGENES
cargaImagen("leftArm1");
cargaImagen("legs1");
cargaImagen("torso1");
cargaImagen("rightArm1");
cargaImagen("head1");
cargaImagen('hair1');
}
/////////////****************************/////////////////
function cargaImagen(name) {

images[name] = new Image();
images[name].src = "images/" + name + ".png";
images[name].onload = function() {

var hair = document.getElementById("hair");
hair.addEventListener("click",function(){context.b eginPath(); context.drawImage(images["hair"], x - 37, y - 138 - breathAmt); close.beginPath();
},false);
///////////////////////////////////////
var leftArm = document.getElementById("leftArm");
leftArm.addEventListener("click",function(){contex t.drawImage(images["leftArm"], x + 40, y - 42 - breathAmt);
},false);
///////////////////////////////////////
var legs = document.getElementById("legs");
legs.addEventListener("click",function(){context.d rawImage(images["legs"], x, y);},false);
///////////////////////////////////////
var torso = document.getElementById("torso");
torso.addEventListener("click",function(){context. drawImage(images["torso"], x, y - 50);},false);
///////////////////////////////////////
var head = document.getElementById("head");
head.addEventListener("click",function(){context.d rawImage(images["head"], x - 10, y - 125 - breathAmt);
},false);
///////////////////////////////////////
var rightArm = document.getElementById("rightArm");
rightArm.addEventListener("click",function(){conte xt.drawImage(images["rightArm"], x - 15, y - 42 - breathAmt);
},false);
////////************************************************** ******////////////////////
///////////////////////////////////////////////////////////////////////////////////
//var prueva =document.getElementById("hair1");
////////////////////////////////////////////////////////////////////////////////////1
var hair1 = document.getElementById("hair1");
hair1.addEventListener("click",function(){ context.drawImage(images["hair1"], x - 37, y - 138 - breathAmt);
},false);
///////////////////////////////////////
var leftArm1 = document.getElementById("leftArm1");
leftArm1.addEventListener("click",function(){conte xt.drawImage(images["leftArm1"], x + 40, y - 42 - breathAmt);
},false);
///////////////////////////////////////
var legs1 = document.getElementById("legs1");
legs1.addEventListener("click",function(){context. drawImage(images["legs1"], x, y);},false);
///////////////////////////////////////
var torso1 = document.getElementById("torso1");
torso1.addEventListener("click",function(){context .drawImage(images["torso1"], x, y - 50);},false);
///////////////////////////////////////
var head1 = document.getElementById("head1");
head1.addEventListener("click",function(){context. drawImage(images["head1"], x - 10, y - 125 - breathAmt);
},false);
///////////////////////////////////////
var rightArm1 = document.getElementById("rightArm1");
rightArm1.addEventListener("click",function(){cont ext.drawImage(images["rightArm1"], x - 15, y - 42 - breathAmt);
},false);


//////////////////funtion de borra lo que hay en canvas
var borra = document.getElementById("borra");
borra.addEventListener("click",function(){ canvas.width = canvas.width; },false);
////////////////////////funcion de convertir a imagen pnh o jpg
var img = document.getElementById("avatar");
var png = document.getElementById("png");
var jpeg = document.getElementById("jpeg");

png.addEventListener("click",function(){
img.src = canvas.toDataURL("image/png");
},false);


jpeg.addEventListener("click",function(){
img.src = canvas.toDataURL("image/jpeg");
},false);
}
}

tambien como aria para guardar la imagen en una base de datos
  #2 (permalink)  
Antiguo 12/10/2012, 15:38
Avatar de p414  
Fecha de Ingreso: agosto-2009
Ubicación: casi casi casi... a un lado de la cuna...
Mensajes: 575
Antigüedad: 10 años, 1 mes
Puntos: 44
Respuesta: canvas posicion de imagenes

wow, puedes usar los highlight? es más sencillo leerlo de esa forma y así podremos ayudarte más rápido
__________________
Desde hace tiempo estoy esperandote... bienvenido mi pequeño Diego!!!

Etiquetas: canvas, imagenes, posicion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 22:51.