1IMA/sirkler.html at master · Knusk/1IMA · GitHub

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
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">

  </head>
  <body>

  <canvas id="canvas" width="400" height="400"></canvas>
  </body>
    <div>Test</div>
<script type="text/javascript">const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

   var evt=document.getElementsByTagName('div');
    evt[0].addEventListener("click", setInter);

  function setInter(){
            intervalID = setInterval(circleDraw, 10);}
    var s=0;
    var sStep=0.05;

    function circleDraw(s_){


    void ctx.clearRect(0, 0, 400, 400);
    // void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise]);
// Draw the ellipse
        ctx.setLineDash([0, 0]);
        //////
        ctx.beginPath();
        ctx.strokeStyle = "#0058ff";
        ctx.lineWidth=1;
        ctx.ellipse(200, 200, 150, 150, s, Math.PI, 2*Math.PI);
        ctx.stroke();
        /////
        ctx.beginPath();
        ctx.strokeStyle = "#f00";
        ctx.lineWidth=6;
        ctx.ellipse(200, 200, 120, 120, -s, Math.PI, 2*Math.PI);
        ctx.stroke();
        /////
          /////
        ctx.beginPath();
        ctx.strokeStyle = "#aa0";
        ctx.lineWidth=4;
        ctx.ellipse(200, 200, 130, 130, -s/2, Math.PI/2, 2*Math.PI);
        ctx.stroke();
        /////
        s=s+sStep;
        if (s>Math.PI*2*2){
            console.log("Time Out!");
            clearInterval(intervalID);
            s=0;
            return false;
        }
    }
// Draw the ellipse's line of reflection
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(0, 200);
ctx.lineTo(200, 0);
ctx.stroke();
</script>
</html>