2
respuestas

Cambio de Colores

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Interactuando con el usuario y actividad Cambiando de color

por André Leonardo Saavedra
| 61.2k xp | 82 posts
<canvas width="600" height="400"> </canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400);
    var cambioColor = ["blue","red","green"];
    indiceColor = 0; 

    function dibujarCirculo(evento,color){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;    
        pincel.fillStyle = cambioColor[indiceColor];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);        
    }

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {

        indiceColor++
        if(indiceColor == cambioColor.length){

            indiceColor = 0;
        }

        return false;
    }

    pantalla.oncontextmenu = alterarColor;

</script>
2 respuestas
por Evelyn Reis
| 2221.6k xp | 7955 posts
Alura Scuba Team Instructora

Hola André, espero que estés muy bien.

Estamos muy contentos con tu aprendizaje. Excelente solución, he probado tu código y funciona muy bien, gracias por compartirlo con nosotros.

Continúa con tus estudios y cualquier duda estaremos aquí =)

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios
por Oscar Daniel Cita Gordillo
| 80.1k xp | 6 posts
Analista de BackOffice

Hola Andre, en mi caso utilice dos variables los cuales llame fuera de las funciones, una variable para el color y otra para un contador, luego monte una función que me cambiara el color e iba realizando el conteo según los el clic realizado por el usuario, y funciona tal cual al tuyo xd

<script>

var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");

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

var contar = 0;
var colorcito = 'blue';

function hacerCirculo(evento){
    var x = evento.pageX - pantalla.offsetLeft;
    var y = evento.pageY- pantalla.offsetTop;

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

function cambiarColor() {
    if (contar==0){
        colorcito = 'red';
        contar=1;
    }else if(contar==1){
        colorcito = 'green';
        contar=2;
    }else if(contar==2){
        colorcito = 'blue';
        contar=0;
    }
}

pantalla.onclick = hacerCirculo; //no se agrega la funcion con parentesis para que la funcion arranque al hacer click
pantalla.oncontextmenu = cambiarColor;