javascript - Canvas 中的元素消失

Question

我想使用内部有 table 的 Canvas 。但不幸的是，如果它在 Canvas 内，则不会显示任何元素。如果我将它移到外面，它会工作得很好。

canvas {
  border: 1px solid red;
 }

<canvas>
  <table>
    <tr>
      <td>value 1</td>
      <td>value 2</td>
      <td>value 3</td>
      <td>value 4</td>
      <td>value 5</td>
    </tr>
  </table>
</canvas>

Answer 1

正如 ggorlen 指出的那样，这不是 Canvas 元素的用途。而是制作一个容器元素并将 Canvas 和表格都放入其中。

一个例子是:

<div style="position: relative;">
    <canvas style="position: absolute;">
    </canvas>

    <table style="position: absolute;">
        <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
            <td>value 4</td>
            <td>value 5</td>
        </tr>
    </table>
</div>

这只是将表格置于 Canvas 之上。