如何將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按定位層的順序“接近”查看者。