JSDM

HTML

7
 
1
<canvas id="canvas"></canvas>
2
  <div class="form">
3
    <div>
4
      速度 : <input id="speed" type="range" min="0" max="100" value="50">
5
    </div>
6
    <a href="" id="download" download="fileName">下载截图</a>
7
  </div>

CSS

xxxxxxxxxx
16
 
1
html,body{
2
      width: 100%;
3
      height: 100%;
4
      margin: 0;
5
      padding: 0;
6
      background: black;
7
      overflow: hidden;
8
      cursor: pointer;
9
      font-family: Helvetica, arial, sans-serif;
10
    }
11
    .form{
12
      position: fixed;top: 20px;left:10px;
13
      color: white;
14
    }
15
    a{color:white;text-decoration: none;}
16
    a:hover{text-decoration: underline;}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

84
 
1
2
    window.requestAnimFrame = (function(){
3
      return  window.requestAnimationFrame  ||
4
      window.webkitRequestAnimationFrame    ||
5
      window.mozRequestAnimationFrame       ||
6
      function( callback ){
7
        window.setTimeout(callback, 1000 / 60);
8
      };
9
    })();
10
11
    var canvas    = document.getElementById('canvas'),
12
      ctx       = canvas.getContext('2d'),
13
      ww        = window.innerWidth,
14
      wh        = window.innerHeight,
15
      x         = ww/2,
16
      height    = wh * (Math.sqrt(3)/2),
17
      y         = (wh-height)/2,
18
      triangles = 30,
19
      colors    = [],
20
      start     = true,
21
      speed   = 50;
22
    
23
    canvas.width  = ww;
24
    canvas.height = wh;
25
26
    ctx.strokeStyle = "black";
27
    ctx.lineWidth   = 1;
28
29
    //Set the shading colors
30
    for (var i=0;i<=triangles;i++){
31
      colors[i] = "rgba("+(60+(i*3))+","+(20+(i*3))+","+(80+(i*3))+",1)";
32
    }
33
34
    var j = 0, k = 0;
35
    function draw(){
36
37
      ctx.clearRect(0,0,ww,wh);
38
      for (var i=0;i<=triangles;i++){
39
        
40
        //BLACK & WHITE
41
          // ctx.fillStyle = "white";
42
          // if(i%2==0){ctx.fillStyle="black";}
43
44
        //RANDOM COLOR
45
          ctx.fillStyle = colors[i];
46
47
        ctx.save();
48
        ctx.translate( ww/2, wh/2 );
49
        ctx.rotate(i*j/(-speed*6));
50
        ctx.translate( -ww/2,-wh/2 );
51
52
        ctx.beginPath();
53
        ctx.moveTo(x, y+(i*height/triangles/2));
54
        ctx.lineTo(x+wh/2-(i*wh/triangles/2), y+height-(i*height/triangles/2));
55
        ctx.lineTo(x-wh/2+(i*wh/triangles/2), y+height-(i*height/triangles/2));
56
        ctx.lineTo(x, y+(i*height/triangles/2));
57
        ctx.fill();
58
        ctx.stroke();
59
        ctx.closePath();
60
        
61
        ctx.restore();
62
      };
63
64
      j++;
65
    }
66
67
68
    (function animloop(){
69
      requestAnimFrame(animloop);
70
      if(start)draw();
71
    })();
72
73
74
    // document.body.addEventListener("click", function(){
75
    //  start = !start;
76
    // });
77
    document.getElementById("speed").addEventListener("change", function(val){
78
      speed = Math.round(this.value);
79
    });
80
    document.getElementById("download").addEventListener("click", function(){
81
      start = false;
82
      document.getElementById("download").href = canvas.toDataURL();
83
      document.getElementById("download").download = "Triangles.png";
84
    });
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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