|
@@ -0,0 +1,40 @@
|
|
|
|
+var canvas = document.getElementById("canvas");
|
|
|
|
+var ctx = canvas.getContext("2d");
|
|
|
|
+
|
|
|
|
+ctx.beginPath();
|
|
|
|
+ctx.arc(70, 70, 50, Math.PI/8, -Math.PI/8, false);
|
|
|
|
+ctx.lineTo(65,70);
|
|
|
|
+ctx.closePath();
|
|
|
|
+ctx.strokeStyle = "black";
|
|
|
|
+ctx.fillStyle = "yellow";
|
|
|
|
+ctx.fill();
|
|
|
|
+ctx.stroke();
|
|
|
|
+
|
|
|
|
+ctx.beginPath();
|
|
|
|
+ctx.arc(75, 45, 4, 0, 2 * Math.PI);
|
|
|
|
+ctx.fillStyle = "black";
|
|
|
|
+ctx.fill();
|
|
|
|
+ctx.stroke();
|
|
|
|
+
|
|
|
|
+function creatDots(amountOfDots){
|
|
|
|
+ let directionX = 50;
|
|
|
|
+ for(let i=0;i<amountOfDots;i++){
|
|
|
|
+ ctx.beginPath();
|
|
|
|
+ ctx.arc(directionX=directionX+50, 70, 5, 0, 2 * Math.PI, false);
|
|
|
|
+ ctx.fillStyle ="yellow";
|
|
|
|
+ ctx.fill()
|
|
|
|
+ ctx.stroke();
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+creatDots(8)
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+canvas.addEventListener("click", paint);
|
|
|
|
+
|
|
|
|
+function paint(e){
|
|
|
|
+ ctx.beginPath();
|
|
|
|
+ ctx.arc(e.layerX, e.layerY, 5, 0, 2 * Math.PI, false);
|
|
|
|
+ ctx.fillStyle ="red";
|
|
|
|
+ ctx.fill()
|
|
|
|
+ ctx.stroke();
|
|
|
|
+}
|