Question

问题是：

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

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

如果鼠标靠近左上角差异，其中圆圈是油漆很小但是如果我们在右下角附近差异是几百个像素。

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

要解决此问题，您需要＆＃34;重新缩放＆＃34;鼠标坐标。替换此行：

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小提琴来表明这一点：https://jsfiddle.net/wLwjz7p6/

绘制圆时画布坐标不正确

1 个答案: