68 lines
1.6 KiB
HTML
68 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head></head>
|
|
<body>
|
|
<canvas id="mycanvas" width="600" height="480"></canvas>
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText(true);
|
|
|
|
var canvas = document.getElementById('mycanvas');
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
|
|
|
|
// 20 angles.
|
|
var sweepAngles = [
|
|
-123.7, -2.3, -2, -1, -0.3, -0.000001, 0, 0.000001, 0.3, 0.7,
|
|
1, 1.3, 1.5, 1.7, 1.99999, 2, 2.00001, 2.3, 4.3, 3934723942837.3
|
|
];
|
|
for (var i = 0; i < sweepAngles.length; i++) {
|
|
sweepAngles[i] = sweepAngles[i] * Math.PI;
|
|
}
|
|
|
|
var startAngles = [
|
|
-1, -0.5, 0, 0.5
|
|
]
|
|
for (var i = 0; i < startAngles.length; i++) {
|
|
startAngles[i] = startAngles[i] * Math.PI;
|
|
}
|
|
|
|
var rotations = [
|
|
Math.PI / 4, 0
|
|
]
|
|
|
|
var startAngle = 0;
|
|
var anticlockwise = false;
|
|
var sign = 1;
|
|
var height = 30;
|
|
for (var r = 0; r < rotations.length; r++) {
|
|
ctx.save();
|
|
for (var i = 0; i < startAngles.length * 2; i++) {
|
|
if (i == startAngles.length) {
|
|
anticlockwise = true;
|
|
sign = -1;
|
|
}
|
|
startAngle = startAngles[i % startAngles.length] * sign;
|
|
ctx.save();
|
|
for (var j = 0; j < sweepAngles.length; j++) {
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, 2);
|
|
ctx.ellipse(18, 15, 8, 12, rotations[r], startAngle, startAngle + (sweepAngles[j] * sign), anticlockwise);
|
|
ctx.lineTo(0, 28);
|
|
ctx.fill();
|
|
ctx.restore();
|
|
ctx.translate(30, 0);
|
|
}
|
|
ctx.restore();
|
|
ctx.translate(0, height);
|
|
}
|
|
ctx.restore();
|
|
ctx.translate(0, height * startAngles.length * 2);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|