HTML5 Ya

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>

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>

23 - CANVAS (translate)

Retornar