23 - CANVAS (translate)
Problema:
Confeccionar un programa que implemente una función que dibuje un triángulo, la función recibe la coordenada donde debe dibujarla y la base y altura del triángulo. Trasladar el punto de origen a través del método translate.
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 dibujarTriangulo(lienzo,x,y,base,altura) { lienzo.save(); lienzo.translate(x,y); lienzo.fillStyle="rgb(255,0,0)"; lienzo.beginPath(); lienzo.moveTo(base/2,0); lienzo.lineTo(0,altura); lienzo.lineTo(base,altura); lienzo.lineTo(base/2,0); lienzo.fill(); lienzo.restore(); } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { for(var col=0;col<550;col+=30) dibujarTriangulo(lienzo,col,10,30,130); } } </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