Question

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

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

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

Answer 1

请尝试canvas.style.top =“ 80px”;

Answer 2

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

确保提供单位，例如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状态：

top的效果取决于元素的定位方式（即position属性的值）：


当position设置为absolute或fixed时，top属性指定元素的顶部边缘与其包含块的顶部边缘之间的距离。（包含块需要具有属性position: relative）

将position设置为relative时，top属性指定元素的上边缘在其正常位置以下移动的距离。

将position设置为sticky时，当元素位于视口中时，top属性的行为就像其position为relative一样position在外面时是fixed。

将position设置为static时，top属性无效。

Answer 3

确保将位置设置为相对或绝对。看下面的例子。

<!DOCTYPE html>
<html>

<body>

  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;top: 80px; position: absolute;">
Your browser does not support the HTML5 canvas tag.</canvas>

  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();
  </script>

</body>

</html>

Answer 4

简而言之，width和height是html属性，因此可以使用element.width和element.height进行设置。但是，top是CSS探测器，而不是html属性-因此只能使用element.style.top进行设置。

此外，正如其他答案中已经指出的那样，css position的探测必须为fixed或absolute，以便top和{{1} }。

HTML5画布顶/左

4 个答案: