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

如何把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之后。

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

  1. z-index : -1;
  2. 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"><;filter: );opacity: 0.5"></canvas><script>    var drawtree = function (ctx, startx, starty, length, angle, depth, branchWidth) {            var rand = Math.random,                    ,                    ;            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);            ) {                //树的枝干ctx.) + ) >> ) + ',0)';            }            else {                //树的叶子ctx.) + ) >> ) + ',50,25)';            }            ctx.stroke();            ;            //判断树是否结束if (!n_depth) {                return;            }            )) + ;            branchWidth *= 0.5;            ; 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;                }, )            }        };        var canvas1 = document.getElementById('d1');        var context = canvas1.getContext('2d');        //初始化的树drawtree(, , , -, , );        //context.fill();        //document.getElementById('YST').style.backgroundImage = 'url("' + context.canvas.toDataURL() + '")';</script><px;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>