<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<link rel="stylesheet" type="text/javascript" href="css/index.css"/>
</head>
<body>
<canvas id="canv"></canvas>
<!--
canvas标签是通过脚本来绘制图形用的，一般使用JavaScript来绘制图形才使用的标签
-->
</body>
</html>
<script type="text/javascript">
var c = document.getElementById('canv'); //取我们的canvas标签的id
var $ = c.getContext('2d');
//getContext方法返回一个用于再画布上绘图的环境
//c.getContext('2d')返回一个表示用来绘制的环境类型的环境
//基本意思是要为不同的绘制类型提供不同的的环境。（一般来说是2维、3纬）
//当前唯一支持的就是2d，所以我们给他了一个2d属性
//它返回的则是一个CanvasRenderingContext2D对象，这个对象实现了一个画布所使用的大多数方法
var w = c.width = window.innerWidth;
//获取当前窗口的宽度（如果有滚动条，也会包含在内），当浏览器宽度调整的时候，她也会跟着调整
var h = c.height = window.innerHeight;
//获取当前窗口的高度，效果同宽度一样
var w2 = w * 0.5;
var h2 = h * 0.5;
var ŭ = 0;
var topiary = new branch(90, -30, 0);
var cnt = 0;
function anim() {
cnt++;
ŭ -= .5;
if(cnt % 2) {
draw();
}
window.requestAnimationFrame(anim);
}
anim();
function draw() {
$.save();
//$符号在JS里是可以当做identifier的，也就是说可以当成变量名称，或者函数名称，并且可以打头
//甚至可以单独使用，所以就说明了，$只是一个变量或者函数这里的话$就是jQuery的对象了
//我们使用$是作为变量名调用的是save方法是保存一个问题件将我们的数据保存至save中
$.clearRect(0, 0, w, h);
$.translate(w2, h * 0.98);
$.rotate(Math.PI * 0.98);
topiary.disp($);
$.restore();
}
function branch(len, ang, gen) {
this.len = len;
this.ang = ang;
this.gen = gen;
this.limb = [];
this.sway = 0;
this.mult = rnd(0.01, 0.1);
this.spawn = 0;
this.vel = 0;
if(gen < 10) {
this.limb.push(new branch(len * rnd(0.8, 0.99),
rnd(0, Math.PI / 6), this.gen + 1));
this.limb.push(new branch(len * rnd(0.8, 0.99),
rnd(0, -Math.PI / 6), this.gen + 1));
}
this.disp = function($) {
this.sway++;
$.save();
this.vel *= 0.9;
var dif = 1 - this.spawn;
this.vel += (dif * 0.1);
this.spawn += this.vel;
$.strokeStyle = "hsla(" + (ŭ % 360) + ",100%,50%,1)";
$.alpha = .5;
$.lineWidth = 2;
$.beginPath();
$.rotate(this.ang + (Math.sin(this.sway * this.mult) * Math.PI / 64));
$.moveTo(0, 0);
$.lineTo(this.len * this.spawn, 0);
$.stroke();
$.translate(this.len * this.spawn, 0);
if(this.spawn > 0.6) {
for(var i = 0; i < this.limb.length; i++) {
var limb = this.limb[i];
limb.disp($);
}
}
$.restore();
};
}
function rnd(min, max) {
return Math.random() * (max - min) + min;
}
</script>
css:
body{
background: black;
/*整个body设置成一个黑色的页面*/
background-size: cover;
/*
background-size：制定背景图片大小
cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
*/
margin: 0;
padding: 0;
overflow: hidden;
/*
* overflow：指定如果内容溢出一个元素的框
* visible：默认值。内容不会被修剪，会呈现在元素框之外。
*/
100%;
}