-
Notifications
You must be signed in to change notification settings - Fork 2
/
badges.js
66 lines (48 loc) · 1.82 KB
/
badges.js
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
/**
* Andy Locascio, MIT License
* http://github.com/loc/canvas-badges
*/
function badge(element, points, depth, color) {
var canvas = document.createElement('canvas');
canvas.width = element.clientWidth;
canvas.height = element.clientHeight;
canvas.id = points + "pt-" + color + "-badge";
element.appendChild(canvas);
var context = canvas.getContext('2d'),
devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1,
ratio = devicePixelRatio / backingStoreRatio;
if (devicePixelRatio !== backingStoreRatio) {
var oldWidth = canvas.width;
var oldHeight = canvas.height;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;
canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';
// now scale the context to counter
// the fact that we've manually scaled
// our canvas element
context.scale(ratio, ratio);
}
var size = Math.min(canvas.width/ratio, canvas.height/ratio),
diff = canvas.width * (depth / ratio / 100),
w = size - (diff * 2),
h = size - (diff * 2),
cx = size/2,
cy = size/2;
points = points * 2;
context.beginPath();
for (var i=0; i < points; i++) {
var angle = (i * 2 * Math.PI) / points,
radius = w / 2 + diff;
context.lineTo(cx + radius * Math.cos(angle), cy + radius * Math.sin(angle));
diff = -diff;
}
context.closePath();
context.fillStyle = color;
context.fill();
}