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>，所以这根本不会起作用 + 它会污染画布，甚至如果结果是空白矩形，因为出于安全原因，这些浏览器只要在其上绘制任何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标签），它是您可以绘制的绘图表面。

但是你可以在z顺序中将div 放在画布的顶部，例如：

// 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按照定位图层的顺序“更接近”查看器。

如何将div标签放在画布上

3 个答案:

限制