3
respuestas

DUDA FUNCION oncontextmenu

Buenas noches saludos,

Tenga una duda con la función oncontextmenu , en si cuando este ejecutando el programa al darle click derecho me tiene que hacer el recorrido del arreglo vectores y debe cambiar de color?

3 respuestas

Así es Luis, cada que des clic derecho debe cambiar el color aun que no necesariamente tiene que hacer el recorrido del array, con que cambien el indice de la posición del array funciona, te muestro la función que hice para oncontextmenu

function cambiarColor (evento){

        colorSelect ++;

        if (colorSelect == 3){

            colorSelect = 0;

        }
        return false;
    }

colorSelect es el indice que uso, meto esa variable al arreglo para indicar la posición , espero te sirva de ayuda.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Position</title>
    </head>
    <body>
        <canvas height="400" width="600"></canvas>
        <script>
            const canvas = document.querySelector('canvas');
            const ctx = canvas.getContext('2d');
            const colors = ['green', 'red', 'blue'];

            ctx.strokeStyle = 'green';
            ctx.strokeRect(0, 0, 600, 400);

            let index = 0;

            function drawCircle(event) {
                let x = event.pageX - canvas.offsetLeft;
                let y = event.pageY - canvas.offsetTop;

                ctx.fillStyle = colors[index];
                ctx.beginPath(x, y);
                ctx.arc(x, y, 10, 0, Math.PI * 2);
                ctx.fill();
                console.log(x + ', ' + y);
            }

            function changeColor() {
                index = index + 1;
                if (index >= 3) index = 0;
                return false;
            }

            canvas.oncontextmenu = changeColor;
            canvas.onclick = drawCircle;
        </script>
    </body>
</html>

Ok gracias por las respuestas, pude indentificar en mi código el error, pero no lo mostraba en consola como que es error de ejecución