如何把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之后。
解决这个问题最简单有效的方法：
- z-index : -1;
- 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元素作为网站背景总结详解的更多相关文章
- Canvas使用渐变之-径向渐变详解
创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1) 一共六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...
- HTML行内元素与块级元素有哪些及区别详解
转自 https://www.jb51.net/web/724286.html 这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具 ...
- CSS背景background详解，background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
- EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射（一） c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象
EF+LINQ事物处理 在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...
- 网页元素定位神器之Xpath详解
摘要: 经常在工作中会使用到XPath的相关知识,但每次总会在一些关键的地方不记得或不太清楚,所以免不了每次总要查一些零碎的知识,感觉即很烦又浪费时间,所以对XPath归纳及总结一下. ... ...
- 全网最详细的Sublime Text 3的插件官方网站（图文详解）
不多说,直接上干货! 全网最详细的Windows里下载与安装Sublime Text *(图文详解) 全网最详细的Sublime Text 3的激活(图文详解) 全网最详细的Sublime Text ...
- CSS中的背景用法详解
background 属性是CSS中用于设置元素背景的属性,最简单的background属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片.而不用 ...
- css伪元素:before和:after用法详解
css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面 ...
- css background 背景知识详解
background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
随机推荐
- asp.net大数据导出execl实现分开压缩并下载
asp.net大数据导出execl实现分开压缩并下载 /// <summary> /// 导出数据到EXCEL 多个表的 /// </summary> /// <para ...
- Kinect 开发 —— 控制PPT播放
实现Kinect控制幻灯片播放很简单,主要思路是:使用Kinect捕捉人体动作,然后根据识别出来的动作向系统发出点击向前,向后按键的事件,从而使得幻灯片能够切换. 这里的核心功能在于手势的识别,我们在 ...
- Java：异常体系
异常的类别:可处理异常,运行时异常,非运行时异常 子类重写父类方法,父类方法有异常抛出, 子类重写父类的方法? 不能比父类抛出更大的异常 前言:java 中的异常处理机制你真的理解了吗?掌握了吗?ca ...
- groups---输出指定用户所在组的组成员，
groups命令 groups命令在标准输入输出上输出指定用户所在组的组成员,每个用户属于/etc/passwd中指定的一个组和在/etc/group中指定的其他组. 语法 groups(选项)( ...
- django模型系统二
常用查询及表关系的实现 1.常用查询 每一个django模型类,都有一个默认的管理器 objects QuerySet表示数据库中对象的列表,它可以有0到多个过滤器.过滤器通过给定参数,缩小查询范围. ...
- home.pl 正在促销，一些域名免费（终止于2017.4.4）
home.pl 正在促销,一些域名免费(终止于2017.4.4) home.pl 成立于1997年,是波兰顶尖的互联网服务公司.专注于域名登记,托管网站,保持电子邮件帐户等. home.pl 正在促 ...
- [NOI.AC#34]palinedrome 字符串hash+贪心
容易看出,只要从两边往中间扫描,碰到相等的就直接分割然后加入答案即可,判断相等用字符串hash #include<bits/stdc++.h> #define REP(i,a,b) for ...
- js-YDUI 移动端解决方案
/** * YDUI 可伸缩布局方案 * rem计算方式:设计图尺寸px / 100 = 实际rem 例: 100px = 1rem */ !function (window) { /* 设计图文档宽 ...
- python运算符优先级表
运算符 描述 lambda Lambda表达式 or 布尔“或” and 布尔“与” not x 布尔“非” in,not in 成员测试 is,is not 同一性测试 <,<=,> ...
- iOS 友盟分享
iOS 友盟分享 这个主要是提到怎样通过友盟去自己定义分享的步骤: 一.肯定要去友盟官网下载最新的SDK包,然后将SDK导入到你的project目录里面去. 二.注冊友盟账号.将你的APP加入到你的账 ...