Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Sugerencia] DISEÑA CON EL MOUSE

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Nuestro primer juego y actividad Diseñando con el mouse

por Heiner Tinoco
| 174.5k xp | 172 posts
Director de Proyectos 
<!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>DISEÑA CON EL MOUSE</title>
</head>
<body>
    <canvas width="600" height="400"></canvas>

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');

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

    var poderDibujar = false;

    //Variables para dibujar la paleta
    var xRojo = 0;
    var xVerde  = 50;
    var xAzul = 100;
    var yCuadrados = 0;
    var dimensionCuadrados = 50;
    var colorActivo = "blue";

    function dibujarCirculos(x, y, colorActivo ) {

        if(poderDibujar) {
            pincel.fillStyle = colorActivo;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }
    }

    //Función para dibujar cada uno de los cuadrados de la paleta
    function dibujarCuadrado(x, y, dimension, color) {
        pincel.fillStyle = color;
        pincel.fillRect(x, y, dimension, dimension)
        pincel.fill();
    }

    //Función para dibujar la paleta de colores
    function dibujarPaletaColores() {
        dibujarCuadrado(xRojo, yCuadrados, dimensionCuadrados, 'red');
        dibujarCuadrado(xVerde, yCuadrados, dimensionCuadrados, 'green');
        dibujarCuadrado(xAzul, yCuadrados, dimensionCuadrados, 'blue');
    }

    function habilitarDibujar() {
        poderDibujar = true;
    }

    function deshabilitarDibujar() {
        poderDibujar = false;
    }

    //Función para delimitar el área
    function poderDibujarArea(xCoordenada,yCoordenada){
        if ((xCoordenada >= 0 && xCoordenada < (3*dimensionCuadrados+5)) && 
            (yCoordenada >=0 && yCoordenada < (dimensionCuadrados+5))) {
            return false;
        } else{
            return true;
        }

    }    

    function capturarMovimientoDelMouse(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if (poderDibujarArea(x,y)){
                dibujarCirculos(x,y,colorActivo);
        }
    }

    function seleccionarColor(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        //Cada condición altera el color de la variable colorActivo

        //Comenzamos por la condición del eje Y que es común para todas
        if (y > yCuadrados && y < (yCuadrados + dimensionCuadrados)) {
            if(x > xRojo && x < (xRojo + dimensionCuadrados)) {
                colorActivo = "red";
                console.log(colorActivo);
            } else if (x > xVerde && x < (xVerde + dimensionCuadrados)) {
                colorActivo = "green";
            } else if(x > xAzul && x < (xAzul + dimensionCuadrados)) {
                colorActivo = "blue";
            }            
        }
    }
    pantalla.onmousemove = capturarMovimientoDelMouse;
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;
    dibujarPaletaColores();
    pantalla.onclick = seleccionarColor;
</script>

</body>
</html>
1 respuesta
por MAIRA ALICIA HERNANDEZ OCHOA
| 140.6k xp | 16 posts

Aqui les dejo mi proyecto, ademas agregue un boton para borrar pantalla sin necesidad de actualizar la pantalla.

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

<
button onclick = "borrar()" > Borrar < /button>

<
script >
var pantalla = document.querySelector('#lienzo');

var pincel = pantalla.getContext('2d');

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

var puedoDibujar = false; var colorPincel = 'blue';

function dibujarCirculo(evento) { if (puedoDibujar) { var x = evento.pageX - pantalla.offsetLeft; var y = evento.pageY - pantalla.offsetTop; pincel.fillStyle = colorPincel; pincel.beginPath(); pincel.arc(x, y, 5, 0, 2 * Math.PI); pincel.fill(); } }

pantalla.onmousemove = dibujarCirculo;

function habilitarDibujar() { puedoDibujar = true; }

function deshabilitarDibujar() { puedoDibujar = false; }

pantalla.onmousedown = habilitarDibujar;

pantalla.onmouseup = deshabilitarDibujar;

// Paleta de colores var paleta = document.createElement('div'); paleta.style.width = '50px'; paleta.style.height = '150px'; paleta.style.position = 'absolute'; paleta.style.top = '10px'; paleta.style.left = '10px'; paleta.style.border = '1px solid black';

var colorAzul = document.createElement('div'); colorAzul.style.width = '50px'; colorAzul.style.height = '50px'; colorAzul.style.background = 'blue';

var colorVerde = document.createElement('div'); colorVerde.style.width = '50px'; colorVerde.style.height = '50px'; colorVerde.style.background = 'green';

var colorRojo = document.createElement('div'); colorRojo.style.width = '50px'; colorRojo.style.height = '50px'; colorRojo.style.background = 'red';

paleta.appendChild(colorAzul); paleta.appendChild(colorVerde); paleta.appendChild(colorRojo); document.body.appendChild(paleta);

// Lógica para cambiar el color del pincel colorAzul.onclick = function() { colorPincel = 'blue'; };

colorVerde.onclick = function() { colorPincel = 'green'; };

colorRojo.onclick = function() { colorPincel = 'red'; };

function borrar() { pincel.clearRect(0, 0, pantalla.width, pantalla.height); } < /script>