He estado tratando de hacer este canvas con vase a esta imagen de referencia. Sin embargo, he puesto los diferentes botones para que cual...

Gabriel Felipe Bonilla Puentes

Pregunta

student•

He estado tratando de hacer este canvas con vase a esta imagen de referencia. Sin embargo, he puesto los diferentes botones para que cualquiera pueda escoger el color antes de hacer click en el botón “¡A darle!”.

El problema es que en el JavaScript no he podido vincular los colores y tener completa esta imagen, ya que en la consola me aparece un error del DOM, más que las demás líneas están desordenadas.

¿Qué se puede hacer en este caso?

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Dibujando con canvas</title>
  </head>
  <body>
    <h1>Dibujo en Canvas
    </h1>
    <p>¿Cuántas líneas quieres?<br>
    <input type="text" id="texto_lineas" />
    </p>
    <p> Escoge un color <br>
    <select id="color1">
      <option value="red">Rojo</option>
      <option value="green">Azul</option>
      <option value="blue">Verde</option>
      <option value="yellow">Amarillo</option>
      <option value="magenta">Magenta</option>
      <option value="cyan">Cyan</option>
    </select>
    <select id="color2">
      <option value="red">Rojo</option>
      <option value="green">Azul</option>
      <option value="blue">Verde</option>
      <option value="yellow">Amarillo</option>
      <option value="magenta">Magenta</option>
      <option value="cyan">Cyan</option>
    </select>
    <select id="color3">
      <option value="red">Rojo</option>
      <option value="green">Azul</option>
      <option value="blue">Verde</option>
      <option value="yellow">Amarillo</option>
      <option value="magenta">Magenta</option>
      <option value="cyan">Cyan</option>
    </select>
    <select id="color4">
      <option value="red">Rojo</option>
      <option value="green">Azul</option>
      <option value="blue">Verde</option>
      <option value="yellow">Amarillo</option>
      <option value="magenta">Magenta</option>
      <option value="cyan">Cyan</option>
    </select>
    <input type="button" value="¡A darle!" id="botoncito" />
    <input type="reset" value="Reiniciar" id="reset">
    </p><br>
    <canvas width="300" height="300" id="dibujito2"></canvas>
    <p>Así queda tu dibujo</p>
    <script src="dibujo5.js"></script>
  </body>
</html>

JavaScript

var texto = document.getElementById("texto_lineas");
var boton1 = document.getElementById("botoncito");
var reset = document.getElementById("reset");
var select_color = document.getElementById("color1");
var select_color2 = document.getElementById("color2");
var select_color3 = document.getElementById("color3");
var select_color4 = document.getElementById("color4");

boton1.addEventListener("click", dibujoPorClick);

var d = document.getElementById("dibujito2");
var ancho = d.width;
var lienzo = d.getContext("2d");

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

function dibujoPorClick()
{
  var lineas = parseInt(texto.value);
  var l = 0
  var yi, xf, yf, xi, nxi, nyf, nyi, nxf;

  var espacio = ancho / lineas;

  for(l=0; l < lineas; l++)
  {
    yf = espacio * (l+1);
    xf = espacio * (l+1);
    yi = espacio * l;
    xi = espacio * (l+1);
    nyf = espacio - yf;
    nxf = espacio - xf;
    nyi = espacio - xi;
    nxi = espacio - yi;
    dibujarLinea(select_color, 0, yi, xf, 300);
    dibujarLinea(select_color2,  xi, 0, 300, yf);
    dibujarLinea(select_color3,  xi, 300, 300, nyf);
    dibujarLinea(select_color4,  300, xf, nxf, 300);
    console.log("Linea" + l);
  }

  dibujarLinea(select_color, 1, 1, 1, 299);
  dibujarLinea(select_color2, 1, 299, 299, 299);
  dibujarLinea(select_color3, 299, 1, 1, 1);
  dibujarLinea(select_color4, 299, 299, 299, 1);
  }

He estado tratando de hacer este canvas con vase a esta imagen de referencia. Sin embargo, he puesto los diferentes botones para que cual...

Curso Gratis de Programación Básica

Curso Gratis de Programación Básica