15 - CANVAS (graficar imagenes)
Problema:
Utilizar las distintas variantes como se puede llamar al método drawImage.
pagina.html
estilos.css
Ejecución de la página
<!DOCTYPE HTML> <html> <head> <title>Título de la página</title> <meta charset="UTF-8"> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle="rgb(0,0,0)"; lienzo.fillRect(0,0,600,600); img1 = new Image(); img1.src = 'http://www.tutorialesprogramacionya.com/imagenes/foto1.jpg'; img1.onload = function(){ lienzo.drawImage(img1,0,0); lienzo.drawImage(img1,300,0,50,50); lienzo.drawImage(img1,0,0,125,125,0,300,72,72); } } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="600" height="600"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
No tiene disponible el navegador la capacidad de iframe
Retornar