-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
123 lines (110 loc) · 3.54 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>\(・ω・\)ようこそ！ヨロシク(/・ω・)/</title>
<body align="center">
<canvas width="500" height="500" align="center"></canvas>
<script>
//代码來自於http://feschool.duapp.com/thu-logo.html
void function() {
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
// 中心坐标
var cx = 230;
var cy = 230;
var lifetime = 30000; // 周期
var img = new Image();
img.addEventListener('load', function() {
//@see http://www.w3.org/TR/2dcontext/#dom-context-2d-drawimage
var start = new Date;
setInterval(function() {
render(context, Math.cos(
(new Date - start) % lifetime / lifetime * Math.PI * 2
));
}, 50);
});
img.src = 'http://feschool.duapp.com/img/thu-logo.png';
/**
* 渲染画布
* @param {CanvasRenderingContext2D} context 上下文
* @param {Float} progress 进度，0 ~ 1
*/
function render(context, progress) {
context.save();
context.fillStyle = 'white';
context.fillRect(0, 0, canvas.width, canvas.height);
context.translate(cx, cy); // 修改坐标系原点
// ☆
context.save();
context.rotate(progress * 3.0 * 2 * Math.PI); // 旋转
context.beginPath();
context.arc(0, 0, 50, 0, 2 * Math.PI, true); // 画圆弧
context.closePath();
context.clip();
context.drawImage(img, -cx, -cy);
context.restore();
// 自强不息
context.save();
context.rotate(-progress * 0.7 * 2 * Math.PI); // 旋转
context.beginPath();
context.arc(0, 0, 135, 0, 2 * Math.PI, false); // 画圆弧
context.arc(0, 0, 50, 0, 2 * Math.PI, true); // 画圆弧
context.closePath();
context.clip();
context.drawImage(img, -cx, -cy);
context.restore();
// 清华大学
context.save();
context.rotate(progress * 0.5 * 2 * Math.PI); // 旋转
context.beginPath();
context.arc(0, 0, 190, 0, 2 * Math.PI, false); // 画圆弧
context.arc(0, 0, 139, 0, 2 * Math.PI, true); // 画圆弧
context.closePath();
context.clip();
context.drawImage(img, -cx, -cy - 2.5);
context.restore();
// 边框
context.save();
context.rotate(-progress * 0.4 * 2 * Math.PI); // 旋转
context.beginPath();
context.arc(0, 0, 228, 0, 2 * Math.PI, false); // 画圆弧
context.arc(0, 0, 190, 0, 2 * Math.PI, true); // 画圆弧
context.closePath();
context.clip();
context.drawImage(img, -cx + 1, -cy - 1.5);
context.restore();
context.restore();
}
var canvasTemp = document.createElement('canvas');
var imgView = document.querySelector('img');
canvasTemp.width = imgView.width;
canvasTemp.height = imgView.height;
var contextTemp = canvasTemp.getContext('2d');
contextTemp.scale(
canvasTemp.width / canvas.width,
canvasTemp.height / canvas.height
);
document.querySelector('input[type=button]').addEventListener('click', function() {
var gif = new GIF({
repeat: 0,
workers: 3,
quality: 10, // 品质
workerScript: 'components/gif.js/dist/gif.worker.js'
});
for (var i = 0; i < lifetime; i += 500) {
render(contextTemp, Math.cos(
i / lifetime * Math.PI * 2
));
gif.addFrame(contextTemp.canvas, { delay: 100, copy: true });
}
gif.on('finished', function(blob) {
var url = URL.createObjectURL(blob);
document.querySelector('img').src = url;
document.querySelector('#download').href = url;
self.disabled = false;
});
gif.render();
});
}();
</script>
</body></html>