2 Commits 9a41b7feca ... f200829717

Author SHA1 Message Date
  Mitrofanova Natali f200829717 canvas hw 2 years ago
  Mitrofanova Natali 0f2810cabc canvas cw 2 years ago
3 changed files with 60 additions and 0 deletions
  1. 15 0
      ClassWorks/canvas/index.html
  2. 40 0
      ClassWorks/canvas/script.js
  3. 5 0
      ClassWorks/canvas/style.css

+ 15 - 0
ClassWorks/canvas/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>canvas</title>
+    <link rel="stylesheet" href="style.css">
+    
+</head>
+<body>
+<canvas id="canvas" width="500px"; height="500px"></canvas>
+
+<script src="script.js"></script>
+</body>
+</html>
+

+ 40 - 0
ClassWorks/canvas/script.js

@@ -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();
+}

+ 5 - 0
ClassWorks/canvas/style.css

@@ -0,0 +1,5 @@
+#canvas{
+ 
+    border: 1px solid grey;
+    margin: 50px 100px;
+}