1
respuesta

modificacion al juego de dibujarCirculo

les comparto una modificación del juego de dibujarCirculo que me pareció simple pero interesante.

lo que hace es pedirle al usuario mediante el prompt que elija el color de fondo y el color del pincel

<meta charset="utf-8">

<canvas width="600" height="400"> </canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d")
    var colorFondo = prompt("ingrese el color del fondo");

    pincel.fillStyle = colorFondo;
    pincel.fillRect(0,0,600,400);

    /*function exibirAlerta(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        console.log(evento);
        alert(x + "," + y);
    }*/

    var colorPincel = prompt("ingrese el color que quiere dibujar en ingles parfavore..");
    function dibujarCirculo(event){


        var x = event.pageX - pantalla.offsetLeft;
        var y = event.pageY - pantalla.offsetTop;

        pincel.fillStyle = colorPincel;
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14)
        pincel.fill();
        console.log(x + "," + y);
    }



    pantalla.onclick = dibujarCirculo;

</script>
1 respuesta

Muy buena idea!!!