画圆时画布坐标不正确[重复]

Question

问题是：

我们在 div 内有一个大画布（带有滚动条），带有背景图像，如果我们尝试在其上绘制，坐标就不一样了。

为了显示我们在 mousemove 函数中绘制的问题，位置在 0,0 坐标处是可以的，但是如果我们在图像中继续向右或向下移动，则绘制的圆和鼠标的差异越来越大。

如果鼠标靠近左上角，画圆的地方差别很小，但如果我们靠近右下角，差别是几百像素。

一个 div 内的画布：

<canvas style="width: 1500px; height:800px;" id="myImage" width="1947" height="949"></canvas> 

样式是固定大小并获得滚动，宽度和高度是图像的实际大小。

canvas = document.getElementById('myImage');
context = canvas.getContext('2d');
s.addEventListener('mousemove', function(evt) {
  var mousePos = getMousePos(canvas, evt);
  drawTest(mousePos.x, mousePos.y);
}, false);

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

function drawTest(centerX, centerY) {
  //var rect = canvas.getBoundingClientRect();
  //centerX = centerX  + rect.left;
  //centerY = centerY  + rect.top;
  var radius = 5;
  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 2;
  context.strokeStyle = '#003300';
  context.stroke();
}

我们尝试添加和不添加 canvas.getBoundingClientRect 坐标，但没有结果。

问题

我们如何解决它并在鼠标所在的精确坐标中绘制？

Answer 1

您的问题是画布的比例。 HTML5 画布有两种尺寸——一种是它在页面上显示的尺寸，一种是内部画布的尺寸。

style="width: 1500px; height:800px;" 表明在您的屏幕上，画布的宽度为 1500 像素，宽度为 800 像素。

但是，width="1947" height="949" 表示画布的坐标在 x 轴上上升到 1947，在 y 轴上上升到 949。这意味着最左侧的 x 坐标为 1947。但是，您的 getMousePos 函数会在屏幕上显示坐标，使最左侧看起来像是位于 x 坐标 1500 处。

要解决此问题，您需要“重新调整”鼠标坐标。替换这一行：

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

与

context.arc((centerX / 1500) * 1947, (centerY / 800)*949, radius, 0, 2 * Math.PI, false);

我制作了一个 JS fiddle 来展示这一点：https://jsfiddle.net/wLwjz7p6/