html画布在网页上的位置

Question

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

Answer 1

我猜您在检索鼠标右键时遇到问题 你必须使用getBoundingClientRect来使它们正确。

所以，如果你没有在css中使用/ height来缩放画布，那么 公式将是：

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

加载文档后，如果允许滚动则滚动。