// The getContext method returns an environment for drawing on the canvas. //c.getContext('2d ') returns an environment representing the type of environment used for drawing.//The basic meaning is to provide different types for different drawing types surroundings. (Generally speaking, 2 dimensions, 3 latitudes)
// The only thing currently supported is 2d, so we gave him a 2d property
// it returns a CanvasRenderingContext2D object, this object implements most of the methods used by a canvas
var w = c.width = window.innerWidth ;
// Get the width of the current window (if there is a scroll bar, it will be included), when the browser width is adjusted, she will also adjust
var h = c.height = window.innerHeight;
// Get the current window The height is the same as the width
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 ();
// The $ symbol can be used as an identifier in JS, that is to say, it can be used as a variable name, or a function name, and can be used as a leader.//It
can even be used alone, so it is explained , $ Is just a variable or function. In this case, $ is the object of jQuery.
// We use $ as the variable name to call the save method. It is to save a problem and save our data to save
. 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;
/ * The whole body is set to a black page * /
background-size: cover;
/ *
background-size: Set the background image size
cover: At this time, the aspect ratio of the image will be maintained and the image will be scaled to be The minimum size that completely covers the background positioning area
* /
margin: 0;
padding: 0;
overflow: hidden;
/ *
* overflow: specifies the box if the content overflows an element
* visible: the default value. The content will not be trimmed and will appear outside the element frame.
* /
width: 100%;
}