用鼠标在 canvas 上绘图。描边与当前鼠标位置不匹配

Question

我正在学习 Java 脚本，我正在尝试编写一个非常简单的 canvas 应用程序，您可以在其中使用鼠标进行绘图。但是变量的计算似乎有问题。在左上角，笔划与鼠标位置完全匹配，但是当您从那里移动它时，笔划不再与鼠标位置匹配。

代码如下：

<!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>

如您所见，它非常简单。但我找不到我的错误。提前致谢

编辑：我还创建了一个短片 fiddle： https://jsfiddle.net/3mb7hdcs/7/

Answer 1

您需要考虑 Canvas 的尺寸。

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

用鼠标在 canvas 上绘图。描边与当前鼠标位置不匹配

Drawing with mouse on canvas. Stroke doesen`t match current mouse Position

javascript

canvas

drawing

eventhandler