如何将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;

您可以在此处找到更多信息。

---

局限性

这种方法有很多局限性：

• Edge下方的IE根本不支持<foreignObject> ，因此这将完全不起作用+ 即使结果为空白 ， 也将污染画布，因为这些浏览器会在绘制任何svg图像时立即这样做出于安全原因在其上。

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

• 有些元素的渲染确实很怪异（FF中的<button>没有任何样式， <video>只是某些UA上的怪异事物……）。

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

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

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

Answer 2

canvas是一个HTML元素，可以使用脚本（通常是JavaScript）来绘制图形，因此无法在canvas元素内添加元素，但是可以使用css position在div内移动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按定位层的顺序“接近”查看者。