-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
64 lines (57 loc) · 1.82 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
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000px;" height="500px"></canvas>
<script>
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)", "i"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var oneText = getParameterByName('one') || 'Charts Will hates';
var twoText = getParameterByName('two') || 'Venn Diagrams';
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var oneX = canvas.width / 4;
var oneY = canvas.height / 2;
var twoX = oneX * 3;
var twoY = oneY;
var radius = 150;
// left circle
context.beginPath();
context.arc(oneX, oneY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.fillStyle = 'black';
context.font = 'bold 24px arial';
context.textAlign = 'center';
context.fillText(oneText, oneX, oneY);
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
// right circle
context.beginPath();
context.arc(twoX, twoY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.fillStyle = 'black';
context.font = 'bold 24px arial';
context.textAlign = 'center';
context.fillText(twoText, twoX, twoY);
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
</script>
</body>
</html>