Solução com 7 cores do arco-íris | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<canvas width="600" height="400"></canvas> <body> <script> var tela = document.querySelector('canvas'); var pincel = tela.getContext('2d'); var paleta = ['red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'indigo']; var i = 0; pincel.fillStyle = 'grey'; pincel.fillRect(0, 0, 600, 400); function desenhaCirculo(evento) { var x = evento.pageX - tela.offsetLeft; var y = evento.pageY - tela.offsetTop; pincel.fillStyle=paleta[i]; pincel.beginPath(); pincel.arc(x, y, 10, 0, 2*3.14); pincel.fill(); console.log("posição do esquerdo : " + x + ", " + y); } function mudaCor (evento){ var x = evento.pageX - tela.offsetLeft; var y = evento.pageY - tela.offsetTop; if (i<=5){ i++; } else { i = 0; } console.log("Posição do direito : " + x + ", " + y); return false; } tela.onclick = desenhaCirculo; tela.oncontextmenu = mudaCor; </script> </body>

<canvas width="600"  height="400"></canvas>
<body>
    <script>
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        var paleta = ['red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'indigo'];
        var i = 0;

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

        function desenhaCirculo(evento) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
 // a varável "i" faz referencia ao indice do array "paleta" e deve ser incrementada pra tenhamos acesso as demais cores. Usaremos uma if ao final dessa mesma função para isso.
            pincel.fillStyle=paleta[i];
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2*3.14);
            pincel.fill();
// esse if nos ajudara a percorrer o indice do array
             if (i<= 5){
                i++;
            } else {
                i = 0;
            }
            // **
            console.log("posição do esquerdo : " + x + ", " + y);
        }
        // não precisa dessa função
        // function mudaCor (evento){
        //     var x = evento.pageX - tela.offsetLeft;
        //     var y = evento.pageY - tela.offsetTop;
        //     if (i<=5){
        //         i++;
        //     } else {
        //         i = 0;
        //     }
        //     // i++;
        //     console.log("Posição do direito : " + x + ", " + y);
        //     return false;
        // }
        tela.onclick = desenhaCirculo;
        // tela.oncontextmenu = mudaCor;
    </script>
</body>

//

Mergulhe em programação