Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

Practicando canva: círculo - cuadrado relleno - rectángulo relleno

<h1>Ejercitando con canvas</h1>

<canvas width="800" height="300" id="mipanel"></canvas>
<script> 
    var miLienzo = document.getElementById("mipanel");
    var lapiz = miLienzo.getContext("2d");

    //círculo
    lapiz.beginPath();      
    lapiz.arc(150,150,80, 0, 2*Math.PI);
    lapiz.lineWidth = 5;
    lapiz.stroke();

    //cuadrado  
    lapiz.fillStyle="yellow";
    lapiz.fillRect(350,0,60,60);



    //rectángulo relleno
    lapiz.fillStyle="red";
    lapiz.fillRect(500,5,200,100);



</script> 





3 respuestas

Buena práctica, lo modifique un poco tu original para que muestre todos los dibujos si alguien pueden mejorar el código se agradecerá. Gracias


<h1>Ejercitando con canvas</h1>

<canvas width="600" height="300" id="mipanel"></canvas>
<script> 
    var miLienzo = document.getElementById("mipanel");
    var lapiz = miLienzo.getContext("2d");


    //círculo
    lapiz.beginPath();      
    lapiz.arc(400,150,80, 0, 2*Math.PI);
    lapiz.lineWidth = 5;
    lapiz.stroke();

 </script>

 <canvas width="600" height="300" id="mipanel2"></canvas>
 <script>

    // media circunferencia
    var miLienzo2 = document.getElementById("mipanel2");
    var lapiz2 = miLienzo2.getContext("2d");

    lapiz2.arc(300,150,80, 0.5*Math.PI, 1.5*Math.PI)
    lapiz2.stroke();

    //rectángulo relleno
    lapiz.fillStyle="red";
    lapiz.fillRect(5,5,200,100);

</script> 

Gracias Fernando, buen aporte, coincido en tu pedido, si alguien quiere seguir mejorando, se agradece. Saludos

Muy interesante. No sabia del Math.PI.