画布绘图工具问题

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>

1. 如何在光标点上完全没有绘制该行？我在做什么错？
2. 我正在使用此e.offsetX * 2;，因为我在某个地方看到了它，并且当我做E.Pagex时它不起作用。这是为什么？为什么需要 * 2？

预先感谢！

Answer 1

帆布分辨率v显示大小

问题与画布分辨率和画布显示大小不匹配的事实。

帆布分辨率是通过帆布宽度和高度特性设置的。它们可以设置为如下

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

或通过脚本

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

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

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

设置

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

或通过脚本

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

或CSS

 #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

代码示例

我已经修改了您的片段以扩展鼠标坐标以匹配画布分辨率。

(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;
    var bounds = e.target.getBoundingClientRect()
    mouseScaleX = e.target.width / bounds.width; 
    mouseScaleY = e.target.height / bounds.height; 
    context.beginPath();
    context.moveTo(e.offsetX * mouseScaleX, e.offsetY * mouseScaleY);
  });
  //Detect that the mouse is moving and draw the line while the mouse is still down
  $(canvas).mousemove(function(e) {
    if (mouseDown) {
      var bounds = e.target.getBoundingClientRect()
      mouseScaleX = e.target.width / bounds.width; 
      mouseScaleY = e.target.height / bounds.height; 
      var x = e.offsetX * mouseScaleX;
      var y = e.offsetY * mouseScaleY;
      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>

Answer 2

有一些问题：

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

这是您在没有魔术数字的情况下正确修复它的方法。

(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);

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

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

Answer 3

我修复了它！更换偏移：

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

为什么会起作用？

您用于定位鼠标的功能在两个方向上都具有恒定的偏移。当我注意到图形是呈指数的较远之外，然后是我的鼠标，但在图上恰好在（0,0）（因为任何偏移 * 0，坐标，等于0等于0），我发现了这一点。）。我发现了画布的不断偏移并将其插入，它起作用了！：）

我了解还有其他答案，它们可能更准确，但这并不意味着您必须讨厌这个答案：（