создание приложения для рисования, но оно не рисует полную линию - PullRequest
Новая
       5

создание приложения для рисования, но оно не рисует полную линию

1 голос
/ 27 марта 2020

Я создаю приложение для рисования, но оно не работает, я просто делаю точки, а не целую линию. пожалуйста! помогите мне решить эту проблему. 

    let prevX = 0,
    currX = 0,
    prevY = 0,
    currY = 0,
    painting = false,
    dot = false;

window.addEventListener("load", function() {

    let cvs = document.querySelector(".area");
    let ctx = cvs.getContext("2d");

    cvs.addEventListener("mousedown", function(){
        painting = true;
        dot = true;
    });

    cvs.addEventListener("mouseup", function(){
        painting = false;
        ctx.beginPath();
    });

function draw(){

    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = "red";
    ctx.lineWidth = "2";
    ctx.stroke();
    ctx.closePath();
}

    cvs.addEventListener("mousemove", function(e){

       if (dot) {
            ctx.beginPath();
            ctx.fillStyle = "red";
            ctx.fillRect(currX, currY, 2, 2);
            ctx.closePath();
            dot = false;
        }

        if(painting) {
            prevX = e.clientX;
            prevY = e.clientY;
            currX = e.clientX - cvs.offsetLeft;
            currY = e.clientY - cvs.offsetTop;
            draw();
        }
    });
})
...