-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathflame.html
63 lines (57 loc) · 1.42 KB
/
flame.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
<html>
<head>
</head>
<body style="margin: 0; padding: 0;">
<canvas id="canvas" style="display: block; width: 100%; height: 800px"></canvas>
<script>
var flame = [];
for(var i=0;i<flame.length;++i) {
flame[i].reverse();
}
var peak = 0;
flame.sort(function(a, b) {
peak = Math.max(peak, a.length, b.length);
for(var i=0;i<a.length && i < b.length;++i) {
if (a[i] == b[i]) continue;
if (a[i] < b[i]) return -1;
return 1;
}
return 0;
});
var canvas = document.getElementById("canvas");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var step = (width / flame.length)|0;
var ystep = (height / peak)|0;
for(var i=0;i<flame.length;++i){
for(var j=0;j<flame[i].length;++j) {
var r = Math.min(j*50, 255);
var g = Math.min(j*10, 255);
var b = 0;
ctx.fillStyle = "rgb("+r+","+g+","+b+")";
ctx.fillRect(step*i,height-j*ystep,step,-ystep);
ctx.text
}
}
for(var j=0;j<peak;++j) {
var fn = "";
for(var i=0;i<flame.length;++i){
if (j >= flame[i].length) continue;
if (flame[i][j] == fn) continue;
fn = flame[i][j];
ctx.font = '11px Sans-serif';
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
var y = (height-j*ystep-ystep*0.5)|0;
ctx.strokeText(fn, step*i,y);
ctx.fillStyle = 'white';
ctx.fillText(fn, step*i,y);
ctx.fillRect(step*i,height-j*ystep,1,-ystep);
}
}
</script>
</body>
</html>