Lo primero de todo es como ya sabemos crear el canvas con id canvas, para que nos vamos a complicar:
<canvas id="img" width="500" height="300">
</canvas>
<script type="text/javascript">
//Creamos una funcion que se ejecutará al iniciar la ventana
function img_canvas() {
//recojemos el canvas poniendo la id del canvas html5 para relacionarlo
var canvas = document.getElementById("img");
//Cojemos la 2D para dibujar en él
var context = canvas.getContext("2d");
//creamos la nueva imagen
var img = new Image(500,500);
//le decimos la ruta de la imagen, en este caso html5.jpg
img.src = "jordan.jpg";
//pasamos la imagen al 2d del canvas y se dibujará
//en 0 0 podemos poner las cordenadas de donde empezar a dibujar la imagen
context.drawImage(img, 0, 0);
};
</script>
<a href="#" onClick="img_canvas();">Mostra canvas con imagen (click aquí)</a>
<body onLoad="img_canvas()">
como le puedo cambiar el tamaño de la imagen sin cambiar el tamaño del canvas? :S
ResponderEliminarEn la linea numero ... (no hay numero de lineas xD)
ResponderEliminaren la linea que dice:
//creamos la nueva imagen
var img = new Image(500,500);
esos 500 son anchura y altura de la imagen, simplemente modifica esos numeros. Gracias!!
Hola alguien me puede ayudar, tengo que hacer que en una imagen de fondo se pueda dibujar con el mouse y esa grabarla como una nueva imagen.
ResponderEliminarEscribire un tutorial sobre eso encuanto tenga tiempo. gracias!
Eliminarhttp://www.tutorialeshtml5.com/2012/01/exportar-imagen-desde-canvas-html5.html
Eliminarquiero borrar una parte de la imagen como con clearRect() pero esa no me funciona como le hago?
ResponderEliminarYo lo que hago es pintar un cuadrado de blanco o del color que sea el fondo como en el 'tutorial de interactuar con canvas' algo como esto:
Eliminarfunction limpiar(int x, int y){
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, x, y);
}
Espero averte ayudado, gracias!
Hola, muchas gracias. Tengo una duda, cuando llamas al document.getElementById("img"), en ese caso no debería ser: document.getElementById("canvas");
ResponderEliminarAgraezco tu ayuda,
Saludos.
Si llevas razón, actualizado! Gracias! :D
Eliminarrequiero guardar una imagen jpej con fonde transparente, como le puede hace???
ResponderEliminar