Realice un pequeño cambio y digamos que obtuve parcialmente lo que quería, ya logro dibujar una linea pero me aparece punteada, no se com...

Andersson Camilo Ordoñez Ruiz

Pregunta

student•hace 4 años

Realice un pequeño cambio y digamos que obtuve parcialmente lo que quería, ya logro dibujar una linea pero me aparece punteada, no se como lograr que se vea continua, ademas si mantengo el click por fuera de el canvas, al volver a posar el cursor sobre el canvas me dibuja unas lineas rectas. No se en que este fallando, aunque siento que cada vez estoy mas cerca de terminar el reto.

Javascript

document.addEventListener("mousemove",dibujarMouse);
var superficie = document.getElementById("superficieDibujo");
var papel = superficie.getContext("2d");
var colorcito = "black";

var boton =
{
    LEFT: 1,
    RIGHT:3
};



function dibujarMouse(evento)
{
    //console.log(evento);

    var posX = evento.offsetX;
    var posY = evento.offsetY;

    //console.log("posX "+posX+" posY"+posY);

    switch (evento.which)
    {
        case boton.RIGHT:
            console.log("click derecho");
            
        break;

        case boton.LEFT:
            dibujarLinea(colorcito, evento.layerX, evento.layerY, posX , posY, papel);
            evento.layerX = posX;
            evento.layerY = posY;

            console.log("click izquierdo");
        break;

        default:
            console.log("otro boton");
        break;

    };
};

function dibujarLinea(color, xInicial, yInicial, xFinal, yFinal, lienzo)
{
        lienzo.beginPath();
        lienzo.strokeStyle = color;
        lienzo.lineWidth=2;
        lienzo.moveTo(xInicial,yInicial);
        lienzo.lineTo(xFinal,yFinal);
        lienzo.stroke();
        lienzo.closePath();

}

HTML

<!DOCTYPE html>
<html>
    <head>
        <metacharset="utf-8">
        <title>Dibujito con Mouse</title>
        <h1>Aqui va el dibujito con mouse</h1>
        <p>este es tu dibujito</p>
    </head>

    <body>
        <canvaswidth="400",height="400",id="superficieDibujo" ></canvas>
        <scriptsrc="dibujoMouse.js"></script>
        <p>Mueve el mouse para dibujar</p>


    </body>



</html>

Erick Sergio Capilla Poblano

student•hace 4 años

Muestra el código amigo!

Realice un pequeño cambio y digamos que obtuve parcialmente lo que quería, ya logro dibujar una linea pero me aparece punteada, no se com...

Curso Gratis de Programación Básica

Curso Gratis de Programación Básica