|
@@ -5,7 +5,7 @@
|
|
|
image-rendering: pixelated;
|
|
|
}
|
|
|
</style>
|
|
|
-<canvas id="canvas" width="125" height="125"></canvas>
|
|
|
+<canvas id="canvas" width="550" height="325"></canvas>
|
|
|
<script>
|
|
|
const canvas = document.getElementById("canvas")
|
|
|
|
|
@@ -19,4 +19,19 @@
|
|
|
context.ellipse(20,20,15,8,1.2273132071162383,4.1926143018618225,2.8853539230051624);
|
|
|
context.stroke();
|
|
|
context.fill();
|
|
|
+
|
|
|
+ for (let i = 0; i < 2; i++) {
|
|
|
+ for (let j = -5; j <= 5; j++) {
|
|
|
+ context.beginPath();
|
|
|
+ let x = 25 + (j + 5) * 50;
|
|
|
+ let y = 150 + i * 50;
|
|
|
+ let radius = 20;
|
|
|
+ let startAngle = 0;
|
|
|
+ let endAngle = (Math.PI * j) / 2;
|
|
|
+ let counterclockwise = i == 1;
|
|
|
+
|
|
|
+ context.arc(x, y, radius, startAngle, endAngle, counterclockwise);
|
|
|
+ context.stroke();
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|