設置畫布元素作爲div元素的背景

Question

我們可以使用畫布繪製自定義形狀。 我需要動態地繪製我的形狀作爲畫布項目，並將其放置爲div背景項目。 我的網頁生成運行時間，它們不是靜態html代碼，所以我不能使用棘手的方法。 你的想法是什麼？

問候

Answer 1

看起來你尋找toDataURL()。

UPD： 這裏使用情況的exaple：

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

上的jsfiddle

Answer 2

直播demo聽起來像是你需要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 + ")"; 

請糾正我，如果任何這是錯誤的。