Question

我正在制作一个页面并使用画布..所以在身体部分我正在做这样的事情：

<body>

<canvas id="myCanvas" width="1300" height="1150">

</canvas>

<img src="arbit.png" width ="1000" height="1000" />

</body>

但是在画布空间之后加载图像并且画布上的图形出现在图像上方。

有人可以告诉我这个问题吗？

修改

抱歉错误构成问题..

我想重叠画布和图像......

Answer 1

知道了。

您需要使用一些CSS定位来使两个元素重叠。

查看this JsBin我刚刚敲门，看到它在行动

<强>标记：

<body>

<div class="wrapper">
    <canvas id="myCanvas" width="250" height="250"></canvas>

    <img src="http://dummyimage.com/50x50/000/fff" alt="test" width ="50" height="50" />

</div>
</body>

<强>的CSS：

  .wrapper {
    position:relative;
  }

  .wrapper canvas {
    border:1px solid red;
    position:absolute;
    z-index:1;
  }

  .wrapper img {
    position:absolute;
    top:0px;
    left:20px;
    z-index;2;
  }

Answer 2

<img>元素后面的<canvas>元素，这就是图片显示在画布之后（下方）的原因。

Answer 3

你有没有尝试过：

<body>
   <canvas id="myCanvas" width="1300" height="1150">
      <img src="arbit.png" width ="1000" height="1000" />
   </canvas>
</body>

之后的形象

3 个答案: