javascript - HTML Canvas 在网页上的位置

我有一个基于画布的脚本，类似于dottydots。它的工作正常，但我想更改其画布位置。我尝试过这个职位：绝对。它可以工作，但只能移动画布的可视区域。我的意思是画布的工作区域（我们使用鼠标指针在画布上做某事）保留在旧位置。

最佳答案

我想您在检索正确的鼠标坐标时遇到问题。
您必须使用getBoundingClientRect使其正确。

因此，如果您没有在CSS中使用/高度来缩放画布，则
公式将是：

var mousePos   = [-1, -1];
var canvasRect, canvasLeft, canvasTop
function updateCanvasRect() {
    canvasRect = canvas.getBoundingClientRect();
    canvasLeft = canvasRect.left;
    canvasTop  = canvasRect.top ;
}
function updateMousePos(e) {
   mousePos[0] = e.clientX - canvasLeft;
   mousePos[1] = e.clientY - canvasTop ;
}

你必须打电话


  updateCanvasRect


文档加载后，然后滚动（如果允许滚动）。