如何把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>

如何把canvas元素做为网站背景总结详解

如何把canvas元素做为网站背景总结详解

1、总结

一句话总结：最简单的作法是绝对定位而且z-index属性设置为负数。

一、如何把canvas元素做为网站背景的两种方法？

a、设置层级（本例代码就是用的这种方法）：

b、是将canvas转变为一个路径经过url做为背景

2、如何将&lt;canvas&gt;元素做为网站背景

今天来说一下如何将绘制出的做为背景，从而使其余元素能够在canvas背景下正常排列，达到就像gif图背景同样的效果。

解决这个问题最简单有效的方法：

3、在HTML5里把canvas做的画做为背景的方法

一、设置层级（本例代码就是用的这种方法）：

二、是将canvas转变为一个路径经过url做为背景

2、如何将<canvas>元素做为网站背景