JSDM

HTML

 
1
<div id="controls" class="float">
2
  <span title="Speed">Speed: </span><input type="range" id="speedSlider">
3
  <span title="Radius">Radius: </span><input type="range" id="radiusSlider">
4
</div>
5
<canvas id="c"></canvas>

CSS

x
 
1
html, body {
2
  color: white;
3
  background-color: black;
4
  width: 100%;
5
  height: 100%;
6
  margin: 0;
7
  overflow: hidden;
8
}
9
10
@media (max-width: 600px) {
11
  #controls {
12
    display: none;
13
  }
14
}
15
16
span {
17
  font-size: x-large;
18
  margin-left: 10px;
19
}
20
21
.float {
22
  position: absolute;  
23
}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
86
 
1
(function () {
2
  var canvas = document.getElementById("c");
3
  canvas.width = window.innerWidth;
4
  canvas.height = window.innerHeight;
5
6
  var ctx = canvas.getContext("2d");
7
  var points = [];
8
  var x, y;
9
  var angle = 0;
10
  var r = 100;
11
  var leftMargin = 10;
12
  var speed = 0.02;
13
  ctx.strokeStyle = "white";
14
  ctx.fillStyle = "black";
15
16
  function draw() {
17
    ctx.fillRect(0, 0, canvas.width, canvas.height);
18
19
    ctx.beginPath();
20
    ctx.arc(r + leftMargin, canvas.height/2, r, 0, Math.PI*2, true);
21
    ctx.stroke();
22
    
23
    x = Math.cos(angle) * r + r + leftMargin;
24
    y = Math.sin(angle) * r + canvas.height/2;
25
    points.push(y); // Ticking bomb, it just grows...
26
    ctx.beginPath();
27
    ctx.arc(x, y, 4, 0, Math.PI*2, true);
28
    ctx.fill();
29
    for(var xx = 0; xx < points.length; ++xx) {
30
      ctx.lineTo(r * 2 + leftMargin +xx, points[points.length-xx]);
31
    }
32
    ctx.stroke();
33
    
34
    angle += speed;
35
    window.requestAnimationFrame(draw);
36
  }
37
  
38
  window.requestAnimationFrame(draw);
39
  
40
  
41
  var speedSlider = document.getElementById("speedSlider");
42
  speedSlider.step = 0.001;
43
  speedSlider.min = 0.001;
44
  speedSlider.max = 0.3;
45
  speedSlider.value = speed;
46
  speedSlider.addEventListener("change", function () {
47
    speed = parseFloat(this.value);
48
  });
49
  
50
  var radiusSlider = document.getElementById("radiusSlider");
51
  radiusSlider.max = 300;
52
  radiusSlider.value = r;
53
  radiusSlider.addEventListener("change", function () {
54
    r = parseInt(this.value);
55
  });
56
  
57
  function resize () {
58
    if(canvas.width != window.innerWidth) {
59
      canvas.width = window.innerWidth;
60
    }
61
    if(canvas.height != window.innerHeight) {
62
      canvas.height = window.innerHeight;
63
    }
64
    ctx.strokeStyle = "white";
65
    ctx.fillStyle = "black";
66
  }
67
  
68
  function debounce(func, wait, immediate) {
69
    var timeout;
70
    return function() {
71
      var context = this, args = arguments;
72
      var later = function() {
73
        timeout = null;
74
        if (!immediate) func.apply(context, args);
75
      };
76
      var callNow = immediate && !timeout;
77
      clearTimeout(timeout);
78
      timeout = setTimeout(later, wait);
79
      if (callNow) func.apply(context, args);
80
    };
81
  };
82
  var debouncedResize = debounce(resize, 250);
83
  
84
  window.addEventListener("resize", debouncedResize, false);
85
  
86
})();
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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