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

【问题标题】：Set canvas element as background of a div element将canvas元素设置为div元素的背景
【发布时间】：2013-04-15 08:52:31
【问题描述】：

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

问候

【问题讨论】：

标签： css html

【解决方案1】：

您似乎在搜索toDataURL()。

统一更新： 这里有一个用法示例：

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

在 jsFiddle 上直播 demo

【讨论】：

【解决方案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 + ")";

如有错误请指正。

【讨论】：