Question

请注意，我尝试了其他方法。如何让画布成为＆＃34;背景＆＃34;对于div？ HTML：

<div style="z-index: 1; position: relative;">
  <div id="fireworks"><canvas id="canvas"></canvas></div>
</div>
<div class="page" style="z-index: 50000; height: 100%;">
  <form id="signup-form">
    <input style="display:none">
    <input type="password" style="display:none">
...

Answer 1

只需提供＆＃34; div＆＃34;和＆＃34;帆布＆＃34;相同的高度和宽度。和canvas应该在div里面。像这样 - ＆gt;

HTML / CSS

<div style="width: 500px; height: 400px">
  <canvas style="width: 100%; height:100%"></canvas>
</div>

Answer 2

为＆＃39; canvas＆＃39;设置保证金，为＆＃39; div＆＃39;设置z-index。所以div出现在画布上方。

<div style="width: 500px; height: 400px; z-index: 10; background-color:transparent"></div>
<canvas style="margin-top: -400px; width: 500px; height: 400px;"></canvas>

Answer 3

或者您始终可以使用

将画布设置为背景图像

var whatEverSize = 100;
var canvas = document.createElement("canvas");
canvas.width = whatEverSize;
canvas.height = whatEverSize;
// set the canvas as the element background of the image type jpeg and medium
// compression 
document.getElementById("myDiv").style.background = "url(" + canvas.toDataURL("image/jpeg", 0.5) + ")";

这样你就可以使用CSS进行平铺，缩放，剪辑。

如果你要对画布进行大量渲染，那么问题就是不实用。

如何在画布上放置div

3 个答案: