Question

我只是学习Java脚本和IM试图代码一个非常简单的应用程序的画布，你可以用你的鼠标借鉴。但是计算变量似乎有些错误。在左上角，笔触与鼠标的位置完全匹配，但是当您从那里移动鼠标时，笔触不再与鼠标的位置匹配。

以下是代码：

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

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;

用鼠标在画布上绘图。笔触与当前鼠标位置不匹配

1 个答案: