Question

我想使用内部带有桌子的画布。但不幸的是，如果元素在画布中，则不会显示任何元素。如果我将其移开，它将完全正常。

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元素的方式。而是创建一个容器元素，并将画布和表格都放入其中。

一个例子是：

<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>

那只是把桌子放在画布上。

Answer 2

画布与经典的html元素不同。它旨在用作绘制图形和动画的地方。

如果必须在画布中使用html元素，则不可能直接使用，但可以使用一些API将html元素呈现到画布中（例如：rasterizeHTML-在页面上有示例）。

但是您应该阅读一些基本的画布用法w3schools canvas。

或者查看实时示例，了解画布的功能（例如，使用fabric.js API）以及其他一些使用画布的演示，以简要介绍画布的用法。

画布中的元素消失

2 个答案: