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

Question

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

问候

Answer 1

Looks like you searching for toDataURL().

UPD: Here a usage exaple:

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

Live demo on jsFiddle

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 + ")";

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