Javascript 如何将div和画布放在一起

有没有办法把画布和div放在一起？ 因为我想用画布来画一些东西，用div来显示一些信息

下面是我在JSFIDLE上测试的代码，但由于某种原因，当我在代码中这样做时，div就消失了。

文本1
文本2

我遇到了一个解决方案，在CSS中使用float属性并排显示画布和div。检查下面的代码

在HTML文件中：

<canvas id="myCanvas"  style="border:1px solid #000000;"></canvas>
<div id="div">
  
      <tr>
        <th >Text1</th>
        <th >Text2</th>
      </tr> 
 
</div>

您还可以将画布和div包装在外部div中，并将display:flex的CSS属性赋予它，它也可以工作。记得我用flexbox把你的桌子居中，不用居中也可以。我使用了以下画布脚本

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

---

您可以在my

上看到实时预览，您只需在一个

div

中包装，并将样式应用于该包装

display:flex

。请参阅片段

文本1
文本2

这里有一个并列的例子。还有其他方法来放置它们

HTML

JS

---

您可以简单地将

画布

和

div

用一个

包装器

类包装在父

div

中，并设置flex的显示，这应该将两个元素并排放置

你可以读到

.wrapper{
显示器：flex；
}

文本1
文本2

分享一些你尝试过的代码？@fortune好吧，在jsfiddle中，我刚刚创建了一个画布，有边框、宽度和高度，在我放置了一个div，也有宽度和高度，但出于某种原因，在我的代码中，当我放置画布时，div就消失了。好吧，我刚刚发布了一个基于你的小提琴的解决方案。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

<canvas id="canvas"></canvas>
<div id="stuff"></div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#canvas {
  border: solid 2px red;
}

#stuff {
  width: 100px;
  height: 100px;
  background: grey;
  border: solid 2px black;
}

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d")
canvas.width = 200;
canvas.height = 200;