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

<canvas id='d1' width="600" height="700" style="left: px; border:dashed px #ccc;position:absolute;z-index:-;filter: alpha(opacity:);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 = ,

                    endx, endy, maxangle = 2 * Math.PI / ;

            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 <= ) {

                //树的枝干

ctx.strokeStyle = 'rgb(0,' + (((rand() * ) + ) >> ) + ',0)';

            }

            else {

                //树的叶子

ctx.strokeStyle = 'rgb(0,' + (((rand() * ) + ) >> ) + ',50,25)';

            }

            ctx.stroke();

            n_depth = depth - ;

            //判断树是否结束

if (!n_depth) {

                return;

            }

            subbranch = (rand() * (maxbranch - )) + ;

            branchWidth *= 0.5;

            for (var i = ; 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, , , , -Math.PI / , , );

        //context.fill();

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

</script>

<div id="YST" style="width:px; height:px;border:dashed px #ccc;text-align: center;left: 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>


 
												


											
如何把canvas元素作为网站背景总结详解的更多相关文章
	

    
								
  1. Canvas使用渐变之-径向渐变详解
		
    创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1)​ 一共​六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...
    
		
    2. 
						
  2. HTML行内元素与块级元素有哪些及区别详解
		
    转自 https://www.jb51.net/web/724286.html   这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具 ...
    
		
    3. 
						
  3. CSS背景background详解，background-position详解
		
    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
    
		
    4. 
						
  4. EF+LINQ事物处理  C# 使用NLog记录日志入门操作  ASP.NET MVC多语言 仿微软网站效果(转)  详解C#特性和反射（一）  c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象
		
    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...
    
		
    5. 
						
  5. 网页元素定位神器之Xpath详解
		
    摘要: 经常在工作中会使用到XPath的相关知识,但每次总会在一些关键的地方不记得或不太清楚,所以免不了每次总要查一些零碎的知识,感觉即很烦又浪费时间,所以对XPath归纳及总结一下. ...     ...
    
		
    6. 
						
  6. 全网最详细的Sublime Text 3的插件官方网站（图文详解）
		
    不多说,直接上干货! 全网最详细的Windows里下载与安装Sublime Text *(图文详解) 全网最详细的Sublime Text 3的激活(图文详解) 全网最详细的Sublime Text  ...
    
		
    7. 
						
  7. CSS中的背景用法详解
		
    background 属性是CSS中用于设置元素背景的属性,最简单的background属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片.而不用 ...
    
		
    8. 
						
  8. css伪元素:before和:after用法详解
		
    css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面 ...
    
		
    9. 
						
  9. css background 背景知识详解
		
    background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SQL insert 主键冲突
			
    待总结 https://blog.csdn.net/JavaCoder_juejue/article/details/82313891 https://blog.csdn.net/a772304419 ...
    
			
    2. 
						
  2. LuoguP1251 餐巾计划问题(费用流)
			
    题目描述 一个餐厅在相继的 NN 天里,每天需用的餐巾数不尽相同.假设第 ii 天需要 r_iri​块餐巾( i=1,2,...,N).餐厅可以购买新的餐巾,每块餐巾的费用为 pp 分;或者把旧餐巾送 ...
    
			
    3. 
						
  3. sqlserver 导入excel数据
			
    有的时候需要将excel数据导入到数据库中,这里介绍一下操作方法: 1.可能需要安装sqlserver的插件 [AccessDatabaseEngine],这个可以在网上早,很多. 2.安装插件后,右 ...
    
			
    4. 
						
  4. HDU 1142 A Walk Through the Forest（最短路+dfs搜索）
			
    A Walk Through the Forest Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Jav ...
    
			
    5. 
						
  5. angular 子组件与父组件通讯
			
    1. 子组件app-sidebar.compnent.html (click)="goProject()"设置点击事件 <mat-list-item [routerLink] ...
    
			
    6. 
						
  6. vue项目使用axios
			
    使用: npm install axios --save-dev 在main.js中import: 使用: (1):POST方式 let data= [{receiveAdd:receiveAddVa ...
    
			
    7. 
						
  7. BZOJ5137: [Usaco2017 Dec]Standing Out from the Herd(广义后缀自动机，Parent树)
			
    Description Just like humans, cows often appreciate feeling they are unique in some way. Since Farme ...
    
			
    8. 
						
  8. 洛谷 P1054 等价表达式
			
    洛谷 P1054 等价表达式 题目描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数表达式,然后列出了若干选项,每个选项也是一个代数表达式, ...
    
			
    9. 
						
  9. CF #261 div2 D. Pashmak and Parmida&#39;s problem （树状数组版）
			
    Parmida is a clever girl and she wants to participate in Olympiads this year. Of course she wants he ...
    
			
    10. 
						
  10. bitmap2drawable-两者的转化实现
			
    先来看今天遇到的一个问题,是关于mms报错的.后来发现报的地方如下 Bitmap deleteBitMap = ((BitmapDrawable)mChipDelete).getBitmap(); D ...
    
			
    11.