Change color to the figure does not take it, canvas

Question

Change color to the figure does not take it, canvas

Navigation

#1 by (1 votes)

0

As you can see, I take the color but it does not apply to the figure itself, if you can lend me a hand I would appreciate it. I leave the code below.

$(function() {
  let miLienzo = document.getElementById("myCanvas");
  let lapiz = miLienzo.getContext("2d");
    let cw = (miLienzo.width = 350),
      cx = cw / 2;
  let ch = (miLienzo.height = 350),
      cy = ch / 2;

  let R = 100;

  $("#Figuras").on("change", function() {    
    pintarFigura($(this).val(), lapiz);
  });

  function pintarFigura(lados, ctx) {
    clearCanvas();
    ctx.save();
    ctx.translate(cx,cy);
    if(lados != "rect"){//Sino es un rectangulo entra aqui
      if (lados == 4) {
        ctx.rotate(Math.PI / 4);
        dibujarPoligono(lados, ctx);
        ctx.rotate(-Math.PI / 4);
      } else {//Si es un rectangulo dibujalo
        dibujarPoligono(lados, ctx);
      }
      
    }else{
    dibujarRectangulo(ctx,200,100)
    }
    ctx.restore();
  }

  function clearCanvas() {
    let miLienzo = document.getElementById("myCanvas");
    let lapiz = miLienzo.getContext("2d");

    lapiz.clearRect(-miLienzo.width, -miLienzo.height, 2*miLienzo.width, 2*miLienzo.height);
    lapiz.beginPath();
  }

  function dibujarPoligono(L, ctx) {
    ctx.beginPath();
    for (var i = 0; i < L; i++) {
      x = R * Math.cos((2 * Math.PI / L * i)-Math.PI/2);
      y = R * Math.sin((2 * Math.PI / L * i)-Math.PI/2);
      ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.stroke();
  }
  
  function dibujarRectangulo(ctx,w,h){
    ctx.beginPath();
    ctx.strokeRect(-w/2,-h/2,w,h);
  }

var el_color = "#ff0000";
  ctx.fillStyle = el_color;
  window.addEventListener("load", inicializar, false);

function inicializar() {
  input_color = document.querySelector("[type='color']");
  input_color.value = el_color;
  pintarFigura();
  input_color.addEventListener("input", actualizar1, false);
  input_color.addEventListener("change", actualizar2, false);
  input_color.select(); //llama el método select() para seleccionar el valor de input_color si es un input type text
}
function actualizar1(event) {
  el_color = event.target.value;
}
  
 
function actualizar2(event) {
  ctx.fillStyle = el_color;
  pintarFigura();
}

});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Open sans';
    width:100vw;
    height:100vh;
}
.contenedor{
  width:360px;
  height:360px;
  display:block;
  position:absolute;
  margin:auto;
  top:0;bottom:0;left:0;right:0;
  text-align:center;
}
p{margin:1em;}

canvas{border:2px solid black;}

#Figuras{
    font-size: 1em;
    position:absolute; left:-375px; top:-80px;
}
h1{
  text-align: center;
  margin-top: 10px;
  
}

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
            <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
                <title>
                    Figuras Geométricas
                </title>
				 <link rel="stylesheet" type="text/css" href="css/estilos.css">
                <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
                    </script>
                    <script src="js/index.js">
                    </script>
                </link>
            </meta>
        </meta>
    </head>
<body>
    <h1>APRENONLINE</h1>

<div class="contenedor">
    <p><select id="Figuras">
        <option>
            Seleccione su figura
        </option>
        <option value="100">
            Círculo
        </option>
        <option value="3">
            Triángulo
        </option>
        <option value="4">
            Cuadrado
        </option>
        <option value="rect">
            Rectángulo
        </option>
        <option value="5">
            Pentágono
        </option>
        <option value="6">
            Hexágono
        </option>
        <option value="8">
            Octágono
        </option>  
    </select></p>
    <label>Color:</label>
    <input type="color">
    <canvas id="myCanvas" style="" >
    </canvas>  
</div>

</body>
</html>

javascript html css canvas

asked by InfoTipsconJavitoBCN 04.11.2018 в 01:03

source

1 answer

Detect if a point on a map is inside a circle [closed] Filtering by dates SQLite C #

score 1 · Accepted Answer

There were some functions without attributes. I have also changed the CSS for #Figures. Since you have decided to use jQuery, you no longer need the inicializar function.

$(function() {
  let miLienzo = document.getElementById("myCanvas");
  let lapiz = miLienzo.getContext("2d");
  let cw = (miLienzo.width = 350),
    cx = cw / 2;
  let ch = (miLienzo.height = 350),
    cy = ch / 2;

  let R = 100;
  let el_color = "#ff0000";
  lapiz.fillStyle = el_color;
  let lados = 3;
  let input_color = document.querySelector("[type='color']");
  input_color.value = el_color;
  input_color.addEventListener("input", actualizar1, false);
  input_color.addEventListener("change", actualizar2, false);
  input_color.select();

  $("#Figuras").on("change", function() {
    lados = $(this).val();
    pintarFigura(lados, lapiz);
  });

  function pintarFigura(lados, ctx) {
    clearCanvas();
    ctx.save();
    ctx.translate(cx, cy);
    if (lados != "rect") {
      //Sino es un rectangulo entra aqui
      if (lados == 4) {
        ctx.rotate(Math.PI / 4);
        dibujarPoligono(lados, ctx);
        ctx.rotate(-Math.PI / 4);
      } else {
        //Si es un rectangulo dibujalo
        dibujarPoligono(lados, ctx);
      }
    } else {
      dibujarRectangulo(ctx, 200, 100);
    }
    ctx.restore();
  }

  function clearCanvas() {
    /*
    // Estas dos variables ya están declaradas. No vuelvas a declararlas.
    let miLienzo = document.getElementById("myCanvas");
    let lapiz = miLienzo.getContext("2d");*/

    lapiz.clearRect(
      -miLienzo.width,
      -miLienzo.height,
      2 * miLienzo.width,
      2 * miLienzo.height
    );
    lapiz.beginPath();
  }

  function dibujarPoligono(L, ctx) {
    ctx.beginPath();
    for (var i = 0; i < L; i++) {
      x = R * Math.cos(2 * Math.PI / L * i - Math.PI / 2);
      y = R * Math.sin(2 * Math.PI / L * i - Math.PI / 2);
      ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.fill();
  }

  function dibujarRectangulo(ctx, w, h) {
    ctx.beginPath();
    ctx.fillRect(-w / 2, -h / 2, w, h);
  }

  function actualizar1(event) {
    el_color = event.target.value;
  }
  function actualizar2(event) {
    lapiz.fillStyle = el_color;
    pintarFigura(lados, lapiz);
  }
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Open sans';
    width:100vw;
    height:100vh;
}
.contenedor{
  width:360px;
  height:450px;
  display:block;
  position:absolute;
  margin:auto;
  top:0;bottom:0;left:0;right:0;
  text-align:center;
  border:1px solid
}
p{margin:1em;}

canvas{border:2px solid black;}

#Figuras{
    font-size: 1em;
}
h1{
  text-align: center;
  margin-top: 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>APRENONLINE</h1>

<div class="contenedor">
    <p><select id="Figuras">
        <option>
            Seleccione su figura
        </option>
        <option value="100">
            Círculo
        </option>
        <option value="3">
            Triángulo
        </option>
        <option value="4">
            Cuadrado
        </option>
        <option value="rect">
            Rectángulo
        </option>
        <option value="5">
            Pentágono
        </option>
        <option value="6">
            Hexágono
        </option>
        <option value="8">
            Octágono
        </option>  
    </select></p>
    <p><label>Color:</label><input type="color"></p>
  
    <canvas id="myCanvas" ></canvas>  
</div>