html画布位置的悲哀

Question

我尝试将一个canvas完全覆盖在256px乘256px图像（8x8网格）的顶部，并绘制一个8x8黑色正方形 -

    var canvas = document.querySelector("canvas");
    canvas.width = 1024;
    canvas.height = 1024;
    var c = canvas.getContext("2d");
    c.fillRect(0, 0, 8, 8);

    #wrapper {
      margin: 0 auto;
      width: 256px;
    }
    
    #img {
      position: relative;
      top: 0;
      left: 0;
    }
    
    #canvas {
      position: relative;
      margin-top: 0;
      margin-left: 0;
      top: -256px;
      left: 0;
      z-index: 1;
    }

    <html>
      <body>
        <div id="wrapper">
          <img id="img" src="https://i.imgur.com/0qjIa89.png" />
          <canvas id="canvas"></canvas>
        </div>
      </body>
    </html>

但是，我不明白为什么绘制的黑色方块相对于网格图像略微向下偏移 -

完整的jsfiddle https://jsfiddle.net/ze8ufqcv/7/

如何将画布绘图精确定位在图像的顶部？

Answer 1

添加显示：块;到你的#img选择器。

像这样。

#img {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

Answer 2

接受的答案不是将图像向下移动几个像素，而是实际上消除了两个元素的初始位置之间的间隙。你可以通过省略top: -256px;来看到这一点，你会在图像和画布之间找到一些像素空间。通过添加display:block;消除了这一点。

另一种方法是将包装器设置为position:relative;，将画布设置为position:absolute;并删除顶部偏移量。

Answer 3

这个问题是由于img有一个vertical-align: baseline导致在底部添加3px空间。您可以通过将vertical align: middle添加到img来删除它。由于vertical-align不适用于块级元素，display:block也可以完成这项工作。

var canvas = document.querySelector("canvas");
canvas.width = 1024;
canvas.height = 1024;
var c = canvas.getContext("2d");
c.fillRect(0, 0, 8, 8);

#wrapper {
  margin: 0 auto;
  width: 256px;
}

#img {
  position: relative;
  vertical-align: middle;
  /*or display: block*/
  /* not necessary
  top: 0;
  left: 0; */
}

#canvas {
  position: relative;
  margin-top: 0;
  margin-left: 0;
  top: -256px;
  left: 0;
  z-index: 1;
}

<body>
  <div id="wrapper">
    <img id="img" src="https://i.imgur.com/0qjIa89.png" />
    <canvas id="canvas"></canvas>
  </div>
</body>

html画布位置的悲哀

问题描述投票：1回答：3

3个回答

最新问题

html画布位置的悲哀

问题描述 投票：1回答：3

3个回答

最新问题

问题描述投票：1回答：3