canvas树

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

var c = document.getElementById('canv');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var w2 = w* 0.5;
var h2 = h * 0.5;
var uu = 0;
var topiary = new branch(80, 0, 0);
var cnt = 0;

function anim(){
	cnt++;
  uu-=.5;
  	if (cnt%2) {
      draw();
    }
 window.requestAnimationFrame(anim);
}
anim();

function draw() {
    $.save();
    $.clearRect(0, 0, w, h);
    $.translate(w2, h*0.98);
    $.rotate(-Math.PI * 0.5);
    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(" + (uu % 360) + ",100%,50%,1)";
        $.lineWidth = 1;
        $.beginPath();
        $.rotate(this.ang + (Math.sin(this.sway*this.mult)*Math.PI/128));
        $.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;
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas树-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号