将canvas元素设置为div元素的背景

Question

我们可以使用画布绘制自定义形状。 我需要动态绘制我的形状作为画布项目并将其放置为div背景项目。 我的页面生成运行时间，它们不是静态的html代码，所以我不能使用棘手的方法。 你有什么想法？

此致

Answer 1

您似乎在搜索toDataURL()。

<强> UPD： 这里有一个用法：

dataUrl = your_canvas.toDataURL();
your_div.style.background='url('+dataUrl+')'

在jsFiddle上实时demo

Answer 2

听起来你需要canvas2image：https://github.com/hongru/canvas2image

您可以创建画布，然后将内容作为png：

获取

var canvas = document.createElement("canvas");

....do stuff here...

var img = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height);

然后您需要做的就是使用png作为背景图像：

document.body.style.background = "url(" + img.src + ")";

如果有任何错误，请纠正我。