Una pregunta. Cómo puedo dibujar un triángulo a través de una función. Puede hacerlo utilizando solo líneas. Pero quiero hacer un figura ...

Ermin Delgado Monroy

Pregunta

student•hace 5 años

Una pregunta. Cómo puedo dibujar un triángulo a través de una función. Puede hacerlo utilizando solo líneas. Pero quiero hacer un figura que son solo triángulos y me gustaría hacerlo directamente utilizando una función.

Cristhian A. Agudelo

student•hace 5 años

Dale, si algo no te queda claro, puedes preguntarme por interno.

Ermin Delgado Monroy

student•hace 5 años

Muchas gracias. Voy a estudiar lo que me compartiste.

Cristhian A. Agudelo

student•hace 5 años

Hola, te dejo mi propuesta para hacer lo que dices, en este caso es un triangulo equilatero.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Dibujando con canvas</title>
  </head>
  <body>
    <h1>Dibujo en canvas</h1>
    <canvas id="dibujito" width="300" height="300"></canvas>
    <p>
      Largo de los lados:
      <input type="number" id="lado" /></br />
      coordenada inicial x:
      <input type="number" id="x" /></br />
      coordenada inicial y:
      <input type="number" id="y" /></br />
      <input type="button" value="Aceptar" id="aceptado" />
    </p>
    <p>Así quedan tu triangulito</p>
    <script src="triangulos.js"></script>
  </body>
</html>

var lineaLargo = document.getElementById("lado");
var coorX= document.getElementById("x");
var coorY = document.getElementById("y");
var boton = document.getElementById("aceptado");
boton.addEventListener("click", triangulo);
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");

function dibujar(color,xinicial,yinicial,xfinal,yfinal)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xinicial,yinicial);
  lienzo.lineTo(xfinal,yfinal);
  lienzo.stroke();
  lienzo.closePath();
}


function triangulo()
{
  //largo de la linea
  var largo=parseInt(lineaLargo.value);
  //coordenandas de la primera linea del triangulo donde xi es xinicial y xy es xfinal de igual forma con yi y yf
  var xil1=parseInt(coorX.value);
  var yil1=parseInt(coorY.value);
  var xfl1=xil1+largo;
  var yfl1=yil1;
  //coordenandas de la segunda linea del triangulo
  var xil2=xil1;
  var yil2=yil1;
  var xfl2=xil2+(largo/2);
  //Math.sqrt() es la raiz cuadrada y Math.pow(numero,potencia) es la operación de potenciación
  //por la forma del triangulo use el teorema de pitagoras para hallar la coordenada en yfinal de este lado
  var yfl2=yil2-Math.sqrt(Math.pow(largo,2)-Math.pow(largo/2,2));
  //coordenandas de la tercera linea del triangulo
  var xil3=xfl2;
  var yil3=yfl2;
  var xfl3=xfl1;
  var yfl3=yfl1;

  dibujar("black",xil1,yil1,xfl1,yfl1);//linea1
  dibujar("black",xil2,yil2,xfl2,yfl2);//linea2
  dibujar("black",xil3,yil3,xfl3,yfl3);//linea3
}

Una pregunta. Cómo puedo dibujar un triángulo a través de una función. Puede hacerlo utilizando solo líneas. Pero quiero hacer un figura ...

Curso Gratis de Programación Básica

Curso Gratis de Programación Básica