Question

我尝试将canvas精确地叠加在256px乘256px图像（8x8网格）的顶部，并绘制一个8x8黑色正方形 -

＆＃13;

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

＆＃13;

    #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;
    }

＆＃13;

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

＆＃13;

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

完成jsfiddle https://jsfiddle.net/ze8ufqcv/7/

如何将画布完全定位在图像顶部？

Answer 1

此问题是由于img的{{1}}导致在底部添加3px空间。您可以通过向vertical-align: baseline添加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;
}

Answer 2

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

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

html画布位置的悲哀

2 个答案: