javascript - Canvas绘图工具问题

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

Canvas 分辨率 V 显示尺寸

问题与 Canvas 分辨率和 Canvas 显示尺寸不匹配有关。

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

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

或通过脚本

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

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

显示尺寸是页面上显示的 Canvas 的实际尺寸，通过样式属性 width 和 height 设置

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

或通过脚本

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

或在 CSS 中

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

解决您的问题

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

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

或者您可以使用显示尺寸和 Canvas 分辨率之间的差异来计算鼠标的比例。

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

代码示例

我已经修改了您的代码片段以缩放鼠标坐标以匹配 Canvas 分辨率。

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