如何将 div 标签放在画布上

Question

我想知道，如何将ajax生成的div标签动态放到画布上。

我只是用 ajax 创建 div 标记并将生成的 div 附加到 jsp 页面上的另一个 div 标记。我想在画布上添加主 div。

提前致谢。

Answer 1

您不能只将 HTML 渲染到画布中。相反，一种方法是使用包含您要呈现的内容的 SVG 图像。

要绘制 HTML 内容，您可以使用包含 HTML 的 <foreignObject> 元素，然后将该 SVG 图像绘制到您的画布中。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
  '<foreignObject width="100%" height="100%">' +
  '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
  '<em>I</em> like ' +
  '<span style="color:white; text-shadow:0 0 2px blue;">' +
  'cheese</span>' +
  '</div>' +
  '</foreignObject>' +
  '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {
  type: 'image/svg+xml;charset=utf-8'
});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

您可以找到更多信息here。

---

限制

这种方法有很多局限性：

• Edge 下的 IE 不支持 <foreignObject>，所以这根本不起作用 +它会污染画布，即使结果是空白rect，因为出于安全原因，这些浏览器会在绘制任何 svg 图像后立即执行此操作。

• 出于安全原因，某些浏览器（至少 Safari 9）在画布上绘制 <foreignObject> 时会污染画布。

• 有些元素的渲染很奇怪（<button> 在 FF 中没有任何样式，<video> 在某些 UA 上只是一个奇怪的东西......）。

• 不会将外部资源加载到<img> 元素中，必须先将图像转换为 dataURL，必须将样式直接附加到 svg 中，或内联在 HTML 标签中，字体将具有进行 dataURL 编码。

因此，如果您不介意使用库，最好的方法仍然是使用html2canvas。

如果您介意使用库，那么您可以尝试做它所做的事情：
使用本机画布绘制方法绘制每个 HTML 元素及其样式。

Answer 2

canvas 是一个 HTML 元素，可用于使用脚本（通常是 JavaScript）绘制图形，因此无法在 canvas 元素内添加元素，但您可以使用 css position 来移动画布内的 div

<div class="container">
<canvas id="myCanvas" width="200" height="100"></canvas>
<div id="myDiv"></div>
</div>

css:

.container{postion: relative;}
#myCanvas{background: red;}
#myDiv{height: 50px;width: 50px;background: blue;
position: absolute; top:10px;
}

见JSFIDLE

Answer 3

画布实际上不能包含 div（或任何其他 HTML 标记），它是您可以在其上绘制的绘图表面。

但您可以将 div 按 z 顺序放置在画布的顶部，例如：

// Lower
var ctx = document.getElementById("lower-canvas").getContext('2d');
var path = new Path2D();
path.arc(100, 100, 100, 0, Math.PI * 2, true);
ctx.fillStyle = ctx.strokeStyle = "blue";
ctx.fill(path);

// Upper
ctx = document.getElementById("upper-canvas").getContext('2d');
path = new Path2D();
path.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.fillStyle = ctx.strokeStyle = "green";
ctx.fill(path);

#lower-canvas, #upper-canvas {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 20px;
  top: 20px;
}
#upper-canvas {
  z-index: 2;
}
#the-div {
  position: absolute;
  left: 20px;
  top: 50px;
  z-index: 1;
  background-color: white;
}

<canvas id="lower-canvas" width="300" height="300"></canvas>
<canvas id="upper-canvas" width="300" height="300"></canvas>
<div id="the-div">This is the div</div>

在该示例中，我们甚至不需要z-index，因为 div 是绝对定位的，但画布不是，并且默认情况下，定位元素位于比非定位元素“更接近”查看器的图层上。如果您正在定位画布，您需要添加类似 z-index: 10 的内容（使用任何合适的值）以确保 div 按定位层的顺序“更靠近”查看器。