Question

我正在通过开发绘图工具来练习JavaScript，但我有一些问题。首先，这就是我现在所拥有的： https://jsfiddle.net/w6kLbg2q/

(function($) {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  //Detect a mouse down. Set the xy coordinates
  var mouseDown = false;

  $(canvas).mousedown(function(e) {
    mouseDown = true;

    context.beginPath();
    context.moveTo(e.pageX, e.pageY);
  });

  //Detect that the mouse is moving and draw the line while the mouse is still down
  $(canvas).mousemove(function(e) {
    if (mouseDown) {
      var x = e.offsetX * 2;
      var y = e.offsetY * 2;


      context.lineTo(x, y);
      context.strokeStyle = '#000';
      context.stroke();

    }
  });

  //On mouse up, reset the coordinates
  $(canvas).mouseup(function() {
    mouseDown = false;
    context.closePath();
  });

})(jQuery);

#canvas {
  width: 400px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas">
        This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>

为什么没有准确地在光标处绘制线？我做错了什么？
我正在使用这个e.offsetX * 2;，因为我在某个地方看到了这个，当我执行e.pageX时它无法正常工作。这是为什么？为什么* 2必要？

提前致谢！

Answer 1

画布分辨率V显示尺寸

问题与画布分辨率和画布显示大小不匹配这一事实有关。

通过画布宽度和高度属性设置画布分辨率。它们可以设置如下

BranchA

或通过脚本

jsonb_each

如果您未设置这些值，画布将默认为300 x 150。

显示尺寸是页面上显示的画布的实际尺寸，并通过样式属性宽度和高度设置

[local] #= SELECT json, AVG((v->>'length')::int)
           FROM j, jsonb_each(json) js(k, v)
           GROUP BY json;
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬─────────────────────┐
│                                                                                           json                                                                                        │         avg         │
├───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼─────────────────────┤
│ {"1": {"id": 1, "length": 240, "date_started": "2015-08-25"}, "2": {"id": 2, "length": 27, "date_started": "2015-09-18"}, "3": {"id": 3, "length": 27, "date_started": "2015-10-15"}} │ 98.0000000000000000 │
│ {"1": {"id": 1, "length": 24, "date_started": "2015-08-25"}, "2": {"id": 2, "length": 27, "date_started": "2015-09-18"}, "3": {"id": 3, "length": 27, "date_started": "2015-10-15"}}  │ 26.0000000000000000 │
└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴─────────────────────┘
(2 rows)

Time: 0,596 ms

或通过脚本

<canvas id="canvasId" width="400" height="400"></canvas>

或在CSS

中

canvasId.width = 400;
canvasId.height = 400;

解决您的问题

您的问题有两种解决方案。

首先是让显示尺寸与画布分辨率相匹配。

或者您可以使用显示大小和画布分辨率之间的差异来计算鼠标的比例。

<canvas id="canvasId" style="width:400px;height:400px;"></canvas>

代码示例

我修改了您的代码段以缩放鼠标坐标以匹配画布分辨率。

 canvasId.style.width = "400px";
 canvasId.style.height = "400px";

 #canvasId { 
     width : 400px;
     height : 400px;
 }

var bounds = canvasId.getBoundingClientRect()
mouseScaleX = canvasId.width / bounds.width; 
mouseScaleY = canvasId.height / bounds.height; 
// then multiply the mouse coords with scales

Answer 2

有一些问题：

您正在使用CSS扩展画布，而不是设置实际的视口大小。
我不知道是谁告诉你要将你的偏移乘以2，但这是错误的。由于我在第1点所说的话，这只是一个问题。

以下是如何在没有幻数的情况下正确修复它。

＆＃13;

(function($) {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var mouseDown = false;

  $(canvas).mousedown(function(e) {
    mouseDown = true;
    context.beginPath();
    
    // I'd also suggest changing from pageX/Y to offsetX/Y
    // otherwise you get this weird jumping effect
    context.moveTo(e.offsetX, e.offsetY);
  });

  $(canvas).mousemove(function(e) {
    if (mouseDown) {
      // Remove the multiplier
      var x = e.offsetX;
      var y = e.offsetY;

      context.lineTo(x, y);
      context.strokeStyle = '#000';
      context.stroke();
    }
  });

  $(canvas).mouseup(function() {
    mouseDown = false;
    context.closePath();
  });
})(jQuery);

＆＃13;

#canvas {
  /* You don't need to set the size here */
  border: 1px solid;
  margin: 0 auto;
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Notice how I set the size of the canvas -->
<canvas id="canvas" width="400" height="400">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

＆＃13;

Answer 3

我修好了！替换你的抵消：

var x = e.offsetX / 1.325;
var y = e.offsetY / 2.65;

为什么这样做？

用于定位鼠标的功能在两个方向上都有一个恒定的偏移量。当我注意到绘图指数远离我的鼠标时，我想出了这一点，但是正好在图上的（0,0）处（因为任何偏移* 0，坐标，等于0 ）。我发现了画布的不断偏移并将其插入，它起作用了！：）

我知道还有其他答案，而且它们可能更准确，但并不意味着你不得不讨厌这个：（

画布绘图工具问题

3 个答案:

画布分辨率V显示尺寸

解决您的问题

代码示例