Рисование мышью на холсте.Ход не соответствует текущей позиции мыши - PullRequest
Новая
       25

Рисование мышью на холсте.Ход не соответствует текущей позиции мыши

0 голосов
/ 31 января 2019

Я только изучаю Java Script и пытаюсь написать действительно простое приложение для работы с холстом, которое можно рисовать с помощью мыши.Но что-то с вычислением переменных кажется неправильным.В верхнем левом углу обводка точно соответствует положению мыши, но при перемещении оттуда обводка больше не соответствует положению мыши.

Вот код: 

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        <script>
            jQuery(document).ready(function(){
                var stift;
                var c = document.getElementById("canvas");
                var rect = c.getBoundingClientRect();

                var context = c.getContext("2d");
                var e = 0;
                $("#canvas").mousedown(function(){
                    var x = event.clientX - rect.left;
                    var y = event.clientY -rect.top;
                    context.moveTo(x, y);
                    context.beginPath();
                    context.lineWidth = "1px";
                    context.strokeStyle = "black";
                    e = 1;

                });

                $("#canvas").mousemove(function(){
                    if(e == 1){
                        var x = event.clientX - rect.left;
                        var y = event.clientY - rect.top;
                        console.log(x+"; "+y)
                        context.lineTo(x, y);
                        context.stroke();
                    }
                })

                $("#canvas").mouseup(function(){
                    e=2;
                    context.stroke()
                    context.closePath();
                });
            });
        </script>
    </head>
    <body>
        <canvas id="canvas" style="width: 500px; height: 500px; position: absolute; top:0; left:0; border: 1px solid black;"></canvas>
    </body>
</html>

Как видите, все довольно просто.Но я не могу найти свою ошибку.Заранее спасибо

Редактировать: Я также создал короткую скрипку: https://jsfiddle.net/3mb7hdcs/7/

1 Ответ

0 голосов
/ 31 января 2019

Вам необходимо учитывать размер вашего холста. 

var x = (event.clientX  - rect.left) / (rect.right - rect.left) * c.width;
var y = (event.clientY  - rect.top) / (rect.bottom - rect.top) * c.height;
...