JSDM

HTML

 
1
<canvas id="layer1"></canvas>
2
3
<canvas id="layer2"></canvas>

CSS

xxxxxxxxxx
11
 
1
html, body {
2
  margin: 0;
3
  overflow: hidden;
4
  background-color: #000;
5
}
6
7
canvas {
8
  position: absolute;
9
  top: 0;
10
  left: 0;
11
}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
65
 
1
//Rose: a = 2nh / (n+1); b = (n-1)h / (n+1)
2
3
//Fiddle with a, b, and h. 
4
//See http://mathworld.wolfram.com/Hypotrochoid.html for more info.
5
//Made by Bogden
6
var PETALS = 4;
7
8
var width = window.innerWidth,
9
    height = window.innerHeight;
10
11
var x = 100,
12
    y = 100,
13
    n = PETALS,
14
    h = Math.min(width,height)/5,
15
    b = (n-1)*h/(n+1),
16
    a = 2*n*h/(n+1);
17
18
var oldX, oldY;
19
20
function Layer(layerName) {
21
  this.canvas = document.getElementById(layerName);
22
  this.canvas.width = width;
23
  this.canvas.height = height;
24
  this.ctx = this.canvas.getContext('2d');
25
  this.ctx.strokeStyle = '#fff';
26
  this.ctx.fillStyle = 'rgba(0,0,0,0.01)';
27
}
28
29
Layer.prototype.drawLine = function(x1, y1, x2, y2) {
30
  this.ctx.beginPath();
31
  this.ctx.moveTo(x1,y1);
32
  this.ctx.lineTo(x2,y2);
33
  this.ctx.stroke();
34
}
35
36
Layer.prototype.drawDot = function(x1, y1) {
37
  this.ctx.beginPath();
38
  this.ctx.moveTo(x1, y1);
39
  this.ctx.arc(x1, y1, 5, 0, 2*Math.PI);
40
  this.ctx.fill();
41
}
42
43
function updatePosition(t) {
44
  x = (a-b) * Math.cos(t) + h*Math.cos((a-b)/b*t) + width/2;
45
  y = (a-b) * Math.sin(t) - h*Math.sin((a-b)/b*t) + height/2;
46
}
47
48
function renderFrame(time) {
49
  oldX = x;
50
  oldY = y;
51
  updatePosition(time/(a/b * 1000) * 2 * Math.PI);
52
  layer1.drawLine(oldX, oldY, x, y);
53
  layer2.ctx.clearRect(0, 0, width, height);
54
  layer2.drawDot(x,y);
55
  layer1.ctx.fillRect(0,0,width,height);
56
  requestAnimationFrame(renderFrame);
57
}
58
59
var layer1 = new Layer('layer1');
60
var layer2 = new Layer('layer2');
61
layer2.ctx.fillStyle = '#f00';
62
63
updatePosition(0);
64
setTimeout(renderFrame, 100);
65
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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