Índice

Importar imágenes

La importación de imágenes se realiza en dos pasos:

  • En primer lugar hay que crear la imagen como un objeto JavaScript. No es posible incluir una imagen simplemente mediante el atributo HTML src.

  • La función drawImage se utiliza para diseñar la imagen en el área de dibujo. Es importante que la imagen esté cargada antes de llamar a la función drawImage.

La sintaxis de esta función es drawImage(imagen, x, y), donde image es una referencia a la imagen y x e y son las coordenadas donde se situará la imagen en el área de dibujo.

Las imágenes pueden tener los formatos GIF, JPEG o PNG.

Ejemplo 1

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8">  
</head> 
<script type="text/javascript"> 
function diseño() { 
var canvas = document.getElementById("dibujo"); 
var contexto = canvas.getContext("2d"); 
var img = new Image(); 
img.src = ’rosa.png’; 
contexto.drawImage(img,5,5); 
} 
</script> 
<body onload="diseño()"> 
<canvas id="dibujo" width="210px" height="194px" style="border:  
1px solid black"> 
Su navegador no soporta la etiqueta canvas. 
</canvas> 
<img src="rosa.png" style="visibility: hidden;"> 
</body>  ...