0

Mi principal problema es el de la imagen [![

CODIGO JS

   
$(function(){
    $("#Figuras").on("change",function(){
        //En el evento "change" del select llamamos a pintarFigura con el valor de la 
        //option seleccionada como parámetro
        pintarFigura($(this).val());
    });
});

function pintarFigura(figura){  
    
    //Borramos el canvas
    clearCanvas();

    let miLienzo = document.getElementById("myCanvas");
    let lapiz = miLienzo.getContext("2d");
    
    if(figura === "Rectangulo")
    {
        lapiz.strokeRect(5,5,200,100);
    }
    else if(figura === "Circulo")
    {
        lapiz.beginPath();
        lapiz.arc(100,75,50,0,2*Math.PI);
        lapiz.stroke();
    }
    else if(figura === "Octagono")
    {
        lapiz.strokeStyle = "#000000";
        lapiz.lineWidth = 1;            
        let numberOfSides = 8,
        size = 100,
        Xcenter = 100,
        Ycenter = 100;
        lapiz.beginPath();
        lapiz.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));          
        for (let i = 1; i <= numberOfSides; i += 1) 
        {
            lapiz.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
        }
        lapiz.stroke();
    }
    ///... El resto de figuras (en internet puedes encontrar cómo hacer cada una. Las 3D son bastante, bastante más complejas (a no ser que recurras a librerías externas como d3.js)
}

function clearCanvas(){
    let miLienzo = document.getElementById("myCanvas");
    let lapiz = miLienzo.getContext("2d");
    
    lapiz.clearRect(0, 0, miLienzo.width, miLienzo.height);
    lapiz.beginPath();
}
CODIGO CSS
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Open sans';
}
#Figura{
    margin: 50px;
    font-size: 50px;
}
CODIGO HTML
<!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 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>
    <select id="Figuras">
        <option value="Rectangulo">
            Rectángulo
        </option>
        <option value="Circulo">
            Círculo
        </option>
        <option value="Triangulo">
            Triángulo
        </option>
        <option value="Cuadrado">
            Cuadrado
        </option>
        <option value="Pentagono">
            Pentágono
        </option>
        <option value="Hexagono">
            Hexágono
        </option>
        <option value="Octagono">
            Octágono
        </option>
        <option value="Cubo">
            Cubo
        </option>
        <option value="Esfera">
            Esfera
        </option>
        <option value="Cono">
            Cono
        </option>
        <option value="Piramide">
            Pirámide
        </option>
        <option value="Cilindro">
            Cilindro
        </option>
    </select>
    <div><canvas height="400" id="myCanvas" style="border:4px solid black; margin-left: 350px; margin-top: 110px;" width="600">
    </canvas></div>
    <br/>
    <br/>
</body>
</html>

]2]2

1 respuesta 1

1

He centrado el canvas y la imagen dibujada en el canvas. Para centrar la figura en el medio del canvas tienes que dibujarla alrededor del centro del canvas. Para esto necesitas calcular el centro del canvas, pero antes necesitas declarar las midas de tu canvas en el javascript.

let cw = (miLienzo.width = 300),
      cx = cw / 2;
  let ch = (miLienzo.height = 200),
      cy = ch / 2;

Para demostrar como puedes centrar una figura en el centro del canvas he re escrito la función que dibuja los polígonos en función del centro del canvas (cx,cy) y del número de lados (L). La variable R que aparece en el código representa el radio del circulo circunscrito.

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

  let R = 40;

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

  function pintarFigura(lados, ctx) {
    clearCanvas();
    dibujarPoligono(lados, ctx);
  }

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

    lapiz.clearRect(0, 0, miLienzo.width, miLienzo.height);
    lapiz.beginPath();
  }

  function dibujarPoligono(L, ctx) {
    ctx.beginPath();
    for (var i = 0; i < L; i++) {
      x = cx + R * Math.cos((2 * Math.PI / L * i)-Math.PI/2);
      y = cy + R * Math.sin((2 * Math.PI / L * i)-Math.PI/2);
      ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.stroke();
  }
});
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Open sans';
    width:100vw;
    height:100vh;
}
.contenedor{
  width:308px;
  height:270px;
  display:block;
  position:absolute;
  margin:auto;
  top:0;bottom:0;left:0;right:0;
  text-align:center;
}
p{margin:1em;}


canvas{border:4px solid black;}
#Figuras{

    font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenedor">
    <p><select id="Figuras">
        <option value="100">
            Círculo
        </option>
        <option value="3">
            Triángulo
        </option>
        <option value="4">
            Cuadrado
        </option>
        <option value="5">
            Pentágono
        </option>
        <option value="6">
            Hexágono
        </option>
        <option value="8">
            Octágono
        </option>  
    </select></p>
    <canvas id="myCanvas" style="" >
    </canvas>  
</div>

ACTUALIZACIÓN

El OP quiere dibujar también un rectángulo además de los polígonos regulares. En este caso dibujo todos los polígonos alrededor del origen del canvas y después muevo el contexto en el centro:

Claramente el rectángulo no tiene nada que ver con los demás polígonos regulares. He optado por dimensiones fijas: 100/50

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

  let R = 40;

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

  function pintarFigura(lados, ctx) {
    clearCanvas();
    ctx.save();
    ctx.translate(cx,cy);
    if(lados != "rect"){
    dibujarPoligono(lados, ctx);
    }else{
    dibujarRectangulo(ctx,100,50)
    }
    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);
  }
});
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Open sans';
    width:100vw;
    height:100vh;
}
.contenedor{
  width:308px;
  height:270px;
  display:block;
  position:absolute;
  margin:auto;
  top:0;bottom:0;left:0;right:0;
  text-align:center;
}
p{margin:1em;}


canvas{border:4px solid black;}
#Figuras{

    font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenedor">
    <p><select id="Figuras">
        <option>
            -----
        </option>
        <option value="100">
            Círculo
        </option>
        <option value="3">
            Triángulo
        </option>
        <option value="4">
            Cuadrado
        </option>
        <option value="rect">
            rect
        </option>
        <option value="5">
            Pentágono
        </option>
        <option value="6">
            Hexágono
        </option>
        <option value="8">
            Octágono
        </option>  
    </select></p>
    <canvas id="myCanvas" style="" >
    </canvas>  
</div>

9
  • En que parte del código especificas como dibujas cada figura? Por otra parte me parece bien la respuesta lo unico que las figuras como el triángulo podría ser con la base tocando en el suelo no girado como esta, creo que hay alguna otra figura que le sucede eso (triangulo, cuadrado resto perfect) también en el caso del octagono esta perfecto, muchas gracias
    – xavicoder
    Commented el 3 nov. 2018 a las 10:36
  • 1
    La función dibujarPoligono() dibuja un polígono regular. Si necesitas girar la figura puedes incrementar el ángulo utilizado (2 * Math.PI / L * i) con el ángulo de rotación en radianes.
    – enxaneta
    Commented el 3 nov. 2018 a las 10:41
  • Si pero hay otra cosa que no entiendo porque el circulo tiene ocion value 100 y el resto 3,4,5,6 no entiendo ese valor el porque. A vale son los lados de la figura no y porque el circulo tiene 100. Entonces el rectangulo tiene 4 lados entraria en conflicto con el cuadrado o no porque tambien necesito dibujar el rectangulo
    – xavicoder
    Commented el 3 nov. 2018 a las 10:42
  • Entiendo que solo funciona para poligonos regulares porque para figuras 3D necesito otra cosa no ? No puedo utilizar librerias externas
    – xavicoder
    Commented el 3 nov. 2018 a las 10:44
  • Para las figuras 3d necesitas aprender mucho más. Si quieres puedes utilizar librerías externas. El circulo tiene el valor 100 porque un circulo puede ser aproximado con un polígono regular con muchísimos lados. Creo que al tamaño utilizado habría podido utilizar menos lados. A lo mejor unos 30 habría bastado.
    – enxaneta
    Commented el 3 nov. 2018 a las 10:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.