JSDM

HTML

 
1
<canvas id="c"></canvas>

CSS

xxxxxxxxxx
12
 
1
canvas {
2
  position:absolute;
3
  bottom:0px; left:0px;
4
  background: #f0f9ff;
5
  background: -moz-linear-gradient(top,  #f0f9ff 0%, #cbebff 47%,   #a1dbff 100%);
6
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(47%,#cbebff), color-stop(100%,#a1dbff));
7
  background: -webkit-linear-gradient(top,  #f0f9ff 0%,#cbebff  47%,#a1dbff 100%);
8
  background: -o-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
9
  background: -ms-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
10
  background: linear-gradient(to bottom,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
11
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 );
12
}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

x
 
1
var w=window.innerWidth, h=window.innerHeight;
2
c.width=w; c.height=h;
3
var ctx=c.getContext('2d');
4
var x = c.width / 2;
5
var y = c.height;
6
var n = 10; /* depth, you can change this value... */
7
var l = n*7;
8
var rad = Math.PI/2;
9
var delta = Math.PI/7; /* change this too... */
10
11
var op = [];
12
13
function draw(n, x, y, rad, l) {
14
  if(n > 0) {
15
    var new_x = x - (l*Math.cos(rad));
16
    var new_y = y - (l*Math.sin(rad));
17
    var new_l = n*7;
18
    var new_rad = rad - delta;
19
    op.push({ox:x, oy:y, nox:new_x, noy:new_y, nrad:new_rad, nl: new_l});
20
    draw(n-1, new_x, new_y, new_rad, new_l);
21
    new_rad = rad + delta;
22
    draw(n-1, new_x, new_y, new_rad, new_l);
23
  }
24
}
25
26
draw(n, x, y, rad, l);
27
28
//
29
30
var i = 0;
31
var i_max = op.length;
32
33
function anim(){
34
  if(i < i_max) {
35
    window.requestAnimationFrame(anim);
36
    ctx.beginPath();
37
    ctx.moveTo(op[i].ox, op[i].oy);
38
    ctx.lineTo(op[i].nox, op[i].noy);
39
    ctx.strokeStyle = 'rgb(139,'+(255-op[i].nl*3)+',101)';
40
    ctx.lineWidth=op[i].nl/6;
41
    ctx.stroke();
42
    i++;
43
  }
44
}
45
anim();
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................