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
|
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="canvas"
width="2000"
height="2000"
onload="init()">
<style type="text/css">
.ellipse
{
stroke: red;
stroke-width: 2;
fill: blue;
fill-opacity: 0.1;
}
.axes
{
stroke: blue;
stroke-width: 1;
}
</style>
<script>
<![CDATA[
var COLS = 4;
var ROWS = 4;
var RX = 80;
var RY = 30;
function init()
{
var canvas = document.getElementById("canvas");
var angleStep = 360.0/(COLS*ROWS);
var spacing = 2*Math.max(RX, RY)+10;
for (var c = 0; c < COLS; ++c) {
for (var r = 0; r < ROWS; ++r) {
var ellipse = createEllipse((c+ COLS*r)*angleStep, spacing*(c+0.5), spacing*(r+0.5), RX, RY);
canvas.appendChild(ellipse);
}
}
}
function createEllipse(phi, x, y, rx, ry)
{
var degPerRad = Math.PI/180.0;
var e1x = rx*Math.cos(phi*degPerRad);
var e1y = rx*Math.sin(phi*degPerRad);
var e2x = ry*Math.cos((phi+90)*degPerRad);
var e2y = ry*Math.sin((phi+90)*degPerRad);
var axes = document.createElementNS("http://www.w3.org/2000/svg", "path");
axes.setAttribute("class", "axes");
axes.setAttribute("d", "M"+x+","+y+" l"+e1x+","+e1y+"M"+x+","+y+" l"+e2x+","+e2y);
var ellipse = document.createElementNS("http://www.w3.org/2000/svg", "path");
ellipse.setAttribute("class", "ellipse");
ellipse.setAttribute("d", "M" + (x+e1x) + "," + (y+e1y) +
"A" + rx + "," + ry + " " + phi + " 0,1 " + (x+e2x) + "," + (y+e2y) +
"A" + rx + "," + ry + " " + phi + " 1,1 " + (x+e1x) + "," + (y+e1y) +"z");
var group = document.createElementNS("http://www.w3.org/2000/svg", "g");
group.appendChild(axes);
group.appendChild(ellipse);
return group;
}
]]>
</script>
</svg>
|
