javascript - HTML5 Canvas 设置顶部/左侧

Question

我可以轻松设置 canvas.width 和 canvas.height 属性。我找不到正确的 JavaScript 语法来使用顶部和左侧设置 Canvas 的偏移量。我尝试过直接在 Canvas 上和边界矩形上设置这些属性。

我希望能够设置顶部和左侧偏移，以便在用户单击某个点时可以重新定位 Canvas 。

如果canvas.width = 600工作正常；为什么 canvas.top = 80 不起作用？我很困惑。谢谢你的帮助。

Answer 1

为了设置 Canvas 的顶部位置，您需要将 Canvas 包裹在另一个具有绝对定位的div内。然后设置 Canvas 相对于其包装 div 的位置。最后，您可以设置 Canvas 的样式。

确保您提供单位，例如px、em、rem、% 等...

var panel = document.getElementById('panel');

panel.width = 600;
panel.height = 200;
panel.style.top = '80px'; // Must specify unit.

.container {
  position: absolute;
  background: #0FF;
}

#panel {
  position: relative;
  background: #F00;
}

<div class="container">
  <canvas id="panel"></canvas>
</div>

docs状态:

The effect of top depends on how the element is positioned (i.e., the value of the position property):

• When position is set to absolute or fixed, the top property specifies the distance between the element's top edge and the top edge of its containing block. (Containing block needs to have property position: relative)
• When position is set to relative, the top property specifies the distance the element's top edge is moved below its normal position.
• When position is set to sticky, the top property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
• When position is set to static, the top property has no effect.