如何将div标签放在画布上

Question

i want to know that, how to put the div tag generated with ajax dynamically onto the canvas.

I just create the div tage with ajax and append the generated divs to the another div tag on the jsp page. and i want to add main div on the canvas.

Thanks in advance.

Answer 1

You can't just render HTML into a canvas. Instead, one approach would be to use an SVG image containing the content you want to render.

To draw HTML content, you'd use a <foreignObject> element containing the HTML, then draw that SVG image into your canvas.

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;

You can find more information here .

---

Limitations

This approach has a lot of limitations :

• IE below Edge just doesn't support <foreignObject> , so this won't work at all + it will taint the canvas, even if the result is a blank rect , since these browser do so as soon as any svg images as been drawn on it, for security reasons.

• Some browsers (at least Safari 9) do taint the canvas when a <foreignObject> is drawn on it, for security reasons.

• Some elements do render weirdly ( <button> doesn't have any style in FF, <video> is just a weird thing on some UA ...).

• No external resource will be loaded into the <img> element, images will have to be converted to dataURL first, styles will have to be appended directly into the svg, or inline in the HTML tags, fonts will have to be dataURL encoded.

So the best approach, if you don't mind using a library, is still to use html2canvas .

If you do mind using a library, then you can try to do what it does :
use the native canvas drawing methods to draw each of the HTML elements and its styles.

Answer 2

canvas is an HTML element which can be used to draw graphics using scripting (usually JavaScript), so It's impossible to add an element inside canvas element, but you can play with css position to move the div inside canvas

<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;
}

see JSFIDLE

Answer 3

A canvas can't actually contain a div (or any other HTML tag), it's a drawing surface you can draw on.

But you can position the div on top of the canvas in the z-order, eg:

 // 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> 

In that example, we don't even need z-index because the div is absolutely positioned but the canvas isn't, and by default positioned elements are on a layer "nearer" the viewer than non-positioned elements. If you are positioning the canvas, you'd add something like z-index: 10 (using whatever value was appropriate) to ensure the div was "nearer" the viewer in the order for the positioned layer.