Консоль не распознает clientX по неизвестной причине - PullRequest
Новая
       11

Консоль не распознает clientX по неизвестной причине

1 голос
/ 21 мая 2019

Я создаю приложение для рисования, и по какой-то причине консоль не распознает clientX и clientY

Я попытался отключить режим устройства в Chrome, и ошибка все еще существует 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Canvas</title>
        <link href="canvas.css" rel="stylesheet">
    </head>
    <body>
        <div id="container">
            <canvas id="canvas"></canvas>   
        </div>
    </body>
    <script src="canvas.js"></script>
</html>

#canvas{
    border: 1px solid black;
}
#container{
    text-align: center;
}

        window.addEventListener('load', () => {
    const canvas = document.querySelector("#canvas");
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth; 
    const ctx = canvas.getContext("2d");

    let painting = false;

    function startPosistion(e){
        painting = true;
        draw(e);
    }
    function endPosistion(){
        painting = false;
        ctx.beginPath();
    }
    function draw(e){
        if(!painting) return;
        ctx.lineWidth = 10;
        ctx.lineCap = 'round';

        ctx.lineTo(e.clientX, e.clientY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(e.clientX, e.clientY);
    }

    canvas.addEventListener('mousedown', startPosistion());
    canvas.addEventListener('mouseup', endPosistion());
    canvas.addEventListener('mousemove', draw);


});

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

1 Ответ

2 голосов
/ 21 мая 2019

изменено 

    canvas.addEventListener('mousedown', startPosistion());
    canvas.addEventListener('mouseup', endPosistion());
    canvas.addEventListener('mousemove', draw);

на 

    canvas.addEventListener('mousedown', startPosistion);
    canvas.addEventListener('mouseup', endPosistion);
    canvas.addEventListener('mousemove', draw);
...