如何把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. 简单说一下 JSON和JSONP
			
    JSON和JSONP,但从缩写看,可能会以为他们是很相似的两个名词,但他们除了缩写相似外,他们是两种类型的概念. 首先: JSON(JavaScript Object Notation)即JavaSc ...
    
			
    2. 
						
  2. javafx checkbox
			
    public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...
    
			
    3. 
						
  3. 完全背包模板 51Nod 1101
			
    N元钱换为零钱,有多少不同的换法?币值包括1 2 5分,1 2 5角,1 2 5 10 20 50 100元. 例如:5分钱换为零钱,有以下4种换法: 1.5个1分 2.1个2分3个1分 3.2个2分 ...
    
			
    4. 
						
  4. 使用Ant打包Android应用具体解释——Ant使用解析
			
    上篇<使用Ant打包Android应用具体解释>描写叙述了使用Ant打包的流程,但非常多步骤并没有说明如此做的原因,本篇将从Ant方面来理解,下一篇从APK生成的流程来说明. APK包的生 ...
    
			
    5. 
						
  5. javascript创建对象的方法--工厂模式（非常好理解）
			
    javascript创建对象的方法--工厂模式(非常好理解) 一.简介 创建对象的方法 本质上都是把"属性"和"方法",封装成一个对象 创建对象的基本模式 普通 ...
    
			
    6. 
						
  6. Qt之界面换肤
			
    简述 常用的软件基本都有换肤功能,例如:QQ.360.迅雷等.换肤其实很简单,并没有想象中那么难,利用前面分享过的QSS系列文章,沃我们完全可以实现各种样式的定制! 简述 实现原理 效果 新建QSS文 ...
    
			
    7. 
						
  7. TypeScript深入学习
			
    基础类型booleannumberstringstring[]//Array<string> 数组类型(ReadonlyArray<string>数组不能修改,也不允许被赋值给 ...
    
			
    8. 
						
  8. MySQL 5.7 多实例安装部署实例
			
    1. 背景  MySQL数据库的集中化运维,可以通过在一台服务器上,部署运行多个MySQL服务进程,通过不同的socket监听不同的服务端口来提供各自的服务.各个实例之间是相互独立的,每个实例的dat ...
    
			
    9. 
						
  9. animation-list -帧动画
			
    帧动画实现起来比较简单,今天接触到使用xml来创建帧动画,记录下来. 它说白了,其实就是动态的展示图片而已 1.在xml中定义帧动画,如下 <?xml version="1.0&quo ...
    
			
    10. 
						
  10. JQuery源码解析 目录
			
    1. a.$查询符号就是放在沙盒里面的: window.jQuery = window.$ = jQuery; b.一个jQuery对象无 new 构造: eg: $("#text" ...
    
			
    11.