Javascript 相对于HTML5画布缩放文档上的鼠标坐标

我在页面上有一个特定大小的HTML5画布

<canvas id="canvas" width="200" height="100" style="border:1px solid #000000;">

现在，当鼠标拖动到画布上时（即，您先单击（不一定在画布内），然后开始在画布上拖动鼠标而不释放）会绘制画布，脚本如下：

  $(function () {
  var c = document.getElementById("canvas");
  var context = c.getContext("2d");
  var clickX = new Array();
  var clickY = new Array();
  var clickDrag = new Array();
  var paint;
  var $canvas=$("#canvas");

  $(this).mousedown(function (e) {         

      paint = true;
      addClick(e.pageX - $canvas[0].offsetLeft, e.pageY - $canvas[0].offsetTop);
      redraw();
  });


  $(this).mousemove(function (e) {
      if (paint) {
          addClick(e.pageX - $canvas[0].offsetLeft, e.pageY - $canvas[0].offsetTop, true);
          redraw();
      }
  });

  $(this).mouseup(function (e) {
      paint = false;
  });

  $(this).mouseleave(function (e) {
      paint = false;
  });

  function addClick(x, y, dragging) {
      clickX.push(x);
      clickY.push(y);
      clickDrag.push(dragging);
  }

  function redraw() {
      context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

      context.strokeStyle = "#000000";
      context.lineJoin = "round";
      context.lineWidth = 2;

      for (var i = 0; i < clickX.length; i++) {
          context.beginPath();
          if (clickDrag[i] && i) {
              context.moveTo(clickX[i - 1], clickY[i - 1]);
          } else {
              context.moveTo(clickX[i] - 1, clickY[i]);
          }
          context.lineTo(clickX[i], clickY[i]);
          context.closePath();
          context.stroke();
      }
  }

});

$（函数（）{
var c=document.getElementById（“画布”）；
var context=c.getContext（“2d”）；
var clickX=新数组（）；
var clickY=新数组（）；
var clickDrag=新数组（）；
var涂料；
var$canvas=$（“#canvas”）；
$（this.mousedown（函数（e）{
油漆=真；
addClick（e.pageX-$canvas[0].offsetLeft，e.pageY-$canvas[0].offsetTop）；
重画（）；
});
$（this）.mousemove（函数（e）{
如果（油漆）{
addClick（e.pageX-$canvas[0]。offsetLeft，e.pageY-$canvas[0]。offsetTop，true）；
重画（）；
}
});
$（此）.mouseup（函数（e）{
油漆=假；
});
$（此）.mouseleave（函数（e）{
油漆=假；
});
功能添加单击（x、y、拖动）{
点击x，推送（x）；
clickY.push（y）；
单击拖动。推送（拖动）；
}
函数重画（）{
context.clearRect（0,0，context.canvas.width，context.canvas.height）；//清除画布
context.strokeStyle=“#000000”；
context.lineJoin=“round”；
context.lineWidth=2；
对于（变量i=0；i

我现在需要的是一种方法，在文档的鼠标事件期间，将文档上的所有鼠标坐标缩放到画布内的相对坐标

因此，无论您在文档上的任何位置拖动鼠标，它都会在画布中绘制（当然，尺寸相对较小）。你知道如何做到这一点吗

我为什么需要这个？

它适用于签名应用程序，当用户使用平板电脑在页面上涂鸦签名时（没有看到页面！），整个签名将在一个小画布中注册

更新

---

这里缺少的最重要的东西是乘以画布/屏幕比率

首先计算比率：

  var docToCanv = Math.min($canvas[0].width / $('body').width(), $canvas[0].height/$('body').height());

然后像这样使用它：

addClick(e.pageX*docToCanv, e.pageY*docToCanv);

根据您想要的其他行为，您可能需要稍微调整位置，但这会让您克服当前的问题

---

您必须像在任何页面上一样计算页面鼠标坐标，找到页面上画布的偏移量，然后从那里计算一种伪画布鼠标位置。我不太清楚当你不直接在画布上时，画布上的“相对较小的尺寸”是什么意思

无论你在文档上拖动鼠标，它都是在画布中绘制的。

-->这一定不是正确的方法，因为

画布绘制

很像

绘制

ing，只有当用户在

画布区域内拖动鼠标时，您才能允许用户进行绘制@Zeaklous，我尝试使用
e.pageX-$canvas[0]来查找相对坐标。offsetLeft，e.pageY-$canvas[0]。offsetTop
，但该逻辑出现错误！它是用于签名应用程序的，因此当用户在平板电脑上涂鸦签名时，整个签名都会在一个小窗口中注册canvas@TheDarkKnight我更新了这个问题，原因是我希望它表现得有点挑剔，需要大量使用不同类型的偏移量和反复试验才能使其正确。为什么不把画布放大，这样签名就容易了？是的，这就是我想要的逻辑，我想如果我把画布的宽度和高度与文档的宽度和高度成比例，我会在画布内得到文档坐标的完美微型复制品，对吗？是的，这是正确的，尽管你可能想使用window。如果文档包含的内容多于浏览器窗口中显示的内容，则用户将仅在浏览器窗口中可见的画布的相对部分上绘制。根据所需的用户体验，您可以执行一些操作，如从用户第一次放下笔的位置开始画布左侧等。您可能还需要在用户绘图时取消默认操作，以便用户在绘图时不会像在中那样选择文档中的其他元素。