介绍 & lt; ! doctype html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> cloth</title>
& lt;才能style>
,,,@import url (http://fonts.googleapis.com/css?family=Poiret + 1);
html {
,,溢出:隐藏。
touch-action才能:没有;
content-zooming才能:没有;
}
body {
位置:才能,绝对;
保证金才能:0;
,,填充:0;
,,背景:# 000;
,,宽度:100%;
,,身高:100%;
}
# canvas {
,,宽度:100%;
,,身高:100%;
,,背景:# 000;
位置:才能,绝对;
}
# text {
位置:才能,绝对;
,,左:0;
,,:50%;
,,宽度:100%;
pointer-events才能:没有;
}
# text div {
位置:才能,绝对;
,,颜色:# 888;
,,左:0;
,,宽度:100%;
,,text-align:中心;
,,:-12 vmin;
,,字体类型:& # 39;Poiret 一个# 39;,,草书;
,,字体大小:6 vmin;
},,,
& lt;才能/style>
& lt;/head>
& lt; body>
& lt;才能canvas id=癱anvas"祝辞& lt;/canvas>
& lt; div id=皌ext"祝辞
& lt;才能div id=癱lic", nowrap>
& lt;/div>
& lt; script 类型=拔谋?javascript" https://www.yisu.com/zixun/, src=" http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js ">
<脚本>
!函数(){
“使用严格的”;//变量
var根=零;
var色调=0;
var automove=true;
var angleX=0;
var angleY=0;/////////////////////////var分辨率=1;
var maxLevels=6;
var branchLength=10 *决议;
var leafSize=100;
var growSpeed=2;
var maxAngle=1.2;
var频率=0.3;///////////////////////////分支构造函数
函数的分支(母公司层次,色调,x, y) {
这一点。父母=父母;
这一点。b1=零;
这一点。b2=零;
这一点。b3=零;
这一点。颜色=色调;
这一点。p0=父母?的父母。p1:新点(x, y, 0);
这一点。p1=new点(
x,
y,
父母===根?
0:
（
父母吗?
parent.p1。z + (
水平?
math . random () * 10 - 5:
0
） :
0
)
);
这一点。水平=水平;
这一点。生活=0;
这一点。角=0;
这一点。vx=0;
这一点。v=0;
}//增加分支
Branch.prototype。成长=function () {//z移动
this.p1.z——;//3 d投影
this.p1.project ();//递归地成长孩子分支
这一点。b1 & & this.b1.grow ();
这一点。b2 & & this.b2.grow ();//增加
如果这一点。生活——> 1){
this.p1。x +=this.vx;
this.p1。y +=this.vy;
}//完成,使更多的孩子分支
如果这一点。生活===1 & &。水平> 0){
这一点。b1=newBranch(这个);
如果(math . random() <=频率)。b2=newBranch(这个);
this.life——;
}//把树
如果(this.p0。z <=-250) {
这一点。父母=零;
}//画出分支
var宽度=*(此决议。水平===1 ?
1 ：
((这一点。+ 1)*(这水平。+ 1)* 0.5 * this.p1.scale水平
);
var=100 - Math.abs (this.p0颜色。z * 0.5);
ctx.beginPath ();
如果(this.level) {
ctx。线宽=宽度;
ctx。strokeStyle="奥软(" +(这一点。色调% 360)+”,14%“+颜色+“%)”;
ctx.moveTo (this.p0。xp, this.p0.yp);
ctx.lineTo (this.p1。xp, this.p1.yp);
ctx.stroke ();
其他}{
ctx。globalCompositeOperation=扒帷?
var c=((。色调+ 180)% 360);
ctx。fillStyle="高速逻辑(“c + +”, 100%, 70%)”;
ctx.arc (this.p1。xp, this.p1。yp,宽度* leafSize * 0.1, 0,数学。π* 2);
ctx.fill ();
ctx.beginPath ();
ctx。fillStyle="高速逻辑(“c + +”, 60%, 6%)”;
ctx.arc (this.p1。xp, this.p1。yp宽度* leafSize 0,数学。π* 2);
ctx.fill ();
ctx。globalCompositeOperation="来源地,而";
}
}//3 d点的构造函数
功能点(x, y, z) {
这一点。x=x;
这一点。y=y;
这一点。z=z;
这一点。规模=0;
这一点。xp=0;
这一点。yp=0;
}//3 d投影点
Point.prototype。项目=function () {
这一点。规模=265/(265 + this.z);
这一点。xp=画布。centerX +(这一点。x - canvas.centerX) * this.scale;
这一点。yp=画布。centerY +(这一点。y - canvas.centerY) * this.scale;
}//新分厂
函数newBranch(父){
var分支=新分支(父母,父母。- 1级,色调,parent.p1。x, parent.p1.y);
分支。角=Math.atan2 (
parent.p1。y - parent.p0.y,
parent.p1。x - parent.p0.x
)+(分支。水平?
(math . random () * maxAngle - (maxAngle * 0.5)):
0
);
分支。vx=Math.cos (branch.angle) * growSpeed;
分支。v=sin (branch.angle) * growSpeed;
分支。生活=分支。水平?
Math.round (math . random() *分支。* branchLength) + 1层:
2;
返回分支;
}//动画树
功能树(){//清除屏幕
ctx。fillStyle=? 000”;
ctx。fillRect(0, 0,画布。宽度,canvas.height);//指针踪迹
如果指针。moveDistance> 10 *分辨率){
指针。moveDistance=0;//主干
var分支=分公司(
根,
root.level,
色调,
root.p1.x,
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍了使用css与js生成的唯美炫酷的图形树效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
效果图如下所示:
在线演示:这里~
给大家分享一个使用css与js生成的唯美炫酷的图形树效果,相关代码如下:
