如何把canvas元素做爲網站背景總結詳解

時間 2019-11-12

原文原文鏈接

如何把canvas元素做爲網站背景總結詳解

1、總結

一句話總結：最簡單的作法是絕對定位而且z-index屬性設置爲負數。

一、如何把canvas元素做爲網站背景的兩種方法？

a、設置層級（本例代碼就是用的這種方法）：

position:absolute;z-index:-2;

b、是將canvas轉變爲一個路徑經過url做爲背景

document.getElementById('YST').style.backgroundImage = 'url("' + context.canvas.toDataURL() + '")';

2、如何將<canvas>元素做爲網站背景

相較於傳統的一張圖片做爲網站背景，使用CSS動畫和HTML5畫圖明顯是更出色、更具時代性的新前端作法。若是在2017年還在使用靜態背景，沒準人家真的會以爲你有5年以上開發經驗呢。css

今天來說一下如何將繪製出的做爲背景，從而使其餘元素能夠在canvas背景下正常排列，達到就像gif圖背景同樣的效果。

首先咱們看代碼：
html

做爲示例，咱們定義了一個元素。引入background.js繪製。具體的background.js是一個擁有scrollWidth和scrollHeight的全屏的星空動畫。具體實現你們沒必要理會，效果是這樣滴：
前端

(其實整個星空一直在動)canvas

出了元素外，咱們還添加了一個寬、高30px的紅色dom

進行測試，看看可否，或者說如何將其放置在畫布上。

好，編譯。咱們發現空空如也。只有一片星空。
打開控制檯，將的高度修改爲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來的直接。具體的，看你咯。url

3、在HTML5裏把canvas做的畫做爲背景的方法

這裏是用canvas作一個動態的生長樹並將其做爲背景，我查閱了不少資料發現通常兩種方法，spa

一、設置層級（本例代碼就是用的這種方法）：

position:absolute;z-index:-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>