html画布在网页上的位置

Question

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

Answer 1

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

所以，如果您没有在 css 中使用 with/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 ;
}

你必须打电话

更新画布矩形

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