如何把canvas元素作為網站背景總結詳解
一、總結
一句話總結：最簡單的做法是絕對定位並且z-index屬性設置為負數。
1、如何把canvas元素作為網站背景的兩種方法？
a、設置層級（本例代碼就是用的這種方法）：
position:absolute;z-index:-2;
b、是將canvas轉變為一個路徑通過url作為背景
document.getElementById('YST').style.backgroundImage = 'url("' + context.canvas.toDataURL() + '")';
二、如何將<canvas>元素作為網站背景
相較於傳統的一張圖片作為網站背景，使用CSS動畫和HTML5畫圖明顯是更出色、更具時代性的新前端做法。如果在2017年還在使用靜態背景，沒准人家真的會覺得你有5年以上開發經驗呢。
今天來講一下如何將繪制出的作為背景，從而使其他元素可以在canvas背景下正常排列，達到就像gif圖背景一樣的效果。
首先我們看代碼：
作為示例，我們定義了一個元素。引入background.js繪制。具體的background.js是一個擁有scrollWidth和scrollHeight的全屏的星空動畫。具體實現大家不必理會，效果是這樣滴：
(其實整個星空一直在動)
出了元素外，我們還添加了一個寬、高30px的紅色
進行測試，看看能否，或者說如何將其放置在畫布上。
好，編譯。我們發現空空如也。只有一片星空。
打開控制台，將的高度修改成200px，我們發現，噢，原來div被順序排列在了canvas之后。
解決這個問題最簡單有效的方法：
- z-index : -1;
- position : absolute;
看看結果：
如你所見，最簡單的將設為背景的方法即1.將其絕對定位，2.將其z-index設做負數。
拓展：
除了z-index，其實當一個元素被設置了opacity，transforms, filters, css-regions, paged media等屬性時，也會產生新的層。比如當你將opacity設為一個小於100%的數，元素也會移至最下層。不過筆者還是覺得不如設置z-index來的直接。具體的，看你咯。
三、在HTML5里把canvas作的畫作為背景的方法
這里是用canvas做一個動態的生長樹並將其作為背景，我查閱了很多資料發現一般兩種方法，
1、設置層級（本例代碼就是用的這種方法）：
position:absolute;z-index:-2;
2、是將canvas轉變為一個路徑通過url作為背景
document.getElementById('YST').style.backgroundImage = 'url("' + context.canvas.toDataURL() + '")';
但是該方法我沒有成功，希望前端大神幫我解決一下，謝謝
這里生長樹的代碼借鑒的簡書作者michaelgbw
廢話少說，貼代碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>將canvas作為背景</title> </head> <body style="margin: 0 auto"> <canvas id='d1' width="600" height="700" style="left: 500px; border:dashed 2px #ccc;position:absolute;z-index:-2;filter: alpha(opacity:50);opacity: 0.5"></canvas> <script> var drawtree = function (ctx, startx, starty, length, angle, depth, branchWidth) { var rand = Math.random, n_length, n_angle, n_depth, maxbranch = 4, endx, endy, maxangle = 2 * Math.PI / 4; var subbranch; ctx.beginPath(); ctx.moveTo(startx, starty); endx = startx + length * Math.cos(angle); endy = starty + length * Math.sin(angle); ctx.lineCap = 'round'; ctx.lineWidth = branchWidth; ctx.lineTo(endx, endy); if (depth <= 2) { //樹的枝干 ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 128) >> 0) + ',0)'; } else { //樹的葉子 ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 64) >> 0) + ',50,25)'; } ctx.stroke(); n_depth = depth - 1; //判斷樹是否結束 if (!n_depth) { return; } subbranch = (rand() * (maxbranch - 1)) + 1; branchWidth *= 0.5; for (var i = 0; i < subbranch; i++) { n_angle = angle + rand() * maxangle - maxangle * 0.5; n_length = length * (0.5 + rand() * 0.5); setTimeout(function () { drawtree(ctx, endx, endy, n_length, n_angle, n_depth, branchWidth); return; }, 500) } }; var canvas1 = document.getElementById('d1'); var context = canvas1.getContext('2d'); //初始化的樹 drawtree(context, 300, 700, 200, -Math.PI / 2, 12, 12); //context.fill(); //document.getElementById('YST').style.backgroundImage = 'url("' + context.canvas.toDataURL() + '")'; </script> <div id="YST" style="width:600px; height:700px;border:dashed 2px #ccc;text-align: center;left: 500px;position:absolute"> <h4>青花瓷</h4> <p align="center">素胚勾勒出青花筆鋒濃轉淡<br> 瓶身描繪的牡丹一如你初妝<br> 冉冉檀香透過窗心事我了然<br> 宣紙上走筆至此擱一半<br> 釉色渲染仕女圖韻味被私藏<br> 而你嫣然的一笑如含苞待放<br> 你的美一縷飄散<br> 去到我去不了的地方<br> 天青色等煙雨<br> 而我在等你<br> 炊煙裊裊升起<br> 隔江千萬里<br> 在瓶底書漢隸仿前朝的飄逸<br> 就當我為遇見你伏筆<br> 天青色等煙雨<br> 而我在等你<br> 月色被打撈起<br> 暈開了結局<br> 如傳世的青花瓷自顧自美麗<br> 你眼帶笑意<br> 色白花青的錦鯉躍然於碗底<br> 臨摹宋體落款時卻惦記着你<br> 你隱藏在窯燒里千年的秘密<br> 極細膩猶如綉花針落地<br> 簾外芭蕉惹驟雨<br> 門環惹銅綠<br> 而我路過那江南小鎮惹了你<br> 在潑墨山水畫里<br> 你從墨色深處被隱去</p> </div> </body> </html>