将 html canvas 放在页面的左上角

Question

我有以下 html 文件：

<canvas id="myCanvas" width="1440" height="800" style="border:0px solid #d3d3d3;"></canvas>
<body style="background-color:#FF0000;">

<script>
    var canvas = document.getElementById('myCanvas')
    let ctx = canvas.getContext('2d')
    ctx.beginPath()
    ctx.fillStyle = "#00FF00"
    ctx.fillRect(0, 0, 2400, 2000) // background
    ctx.stroke()
</script>

生成的页面如下所示：

请注意，canvas 开始于左上角稍微偏右下方。我怎样才能把它准确地放在左上角？

Answer 1

将 margin: 0; padding: 0; 添加到正文，它会将 canvas 放在左上角。

Answer 2

使用位置position:absolute; top: 0; left: 0;.

<canvas id="myCanvas" width="1440" height="800" style="border:0px solid #d3d3d3;position:absolute; top: 0; left: 0;"></canvas>

<body style="background-color:#FF0000;">

  <script>
    var canvas = document.getElementById('myCanvas')
    let ctx = canvas.getContext('2d')
    ctx.beginPath()
    ctx.fillStyle = "#00FF00"
    ctx.fillRect(0, 0, 2400, 2000) // background
    ctx.stroke()
  </script>

Answer 3

在您的 css

上试试这个

*{
  padding:0;
  margin:0;
}
body{
  background:#00FF00;
}
canvas{
  position: absolute;
  top: 0;
  left: 0;
}

将 html canvas 放在页面的左上角

put html canvas at the top left of page

javascript

html5-canvas