circle-maker/circlemaker.html at master · rackfx/circle-maker · 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=0.25">
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <div style="width: 2000px; height: 2000px; border: 1px solid black; margin: auto; font-size: 40px; background: black; color: white;">
      CirclesQty: <input id="count" type="number" value="30" style="width: 80px" >
      CircleSize: <input id="size" type="number" value="7" style="width: 80px">
      Color: <input id="color" value="#000000" style="width: 200px">
      Radius: <input id="radius" type="number" value="1500" style="width: 120px">
      <a id="downloadImgLink" onclick="$('#downloadImgLink').attr('href', canvas.toDataURL());" download="circle.png" href="#" target="_blank"><button style="font-size: 32px">Download</button></a>

      <br/>
      <div id="cbg">
        <canvas id="circleCanvas" width="2000" height="2000" style="border: 1px dotted black;"></canvas>
      </div>


    </div>
    <script>
      var canvas = document.getElementById('circleCanvas');
      var context = canvas.getContext('2d');
      context.scale(.5, .5)
      function drawACircleOfCircles(params){
        /*
          params:
            numberOfCircles = Int
            radius = Distance of dots from center.
            centerX
            centerY
        */
        var eachAngleDistance = 360/params.numberOfCircles;
        for(var i=0;i<params.numberOfCircles;i++){
          var angle = (i*eachAngleDistance)  * Math.PI / 180;
          var x = params.centerX + (params.radius * Math.sin(angle))
          var y = params.centerY + (params.radius * Math.cos(angle))
          drawACircle({
            x:x,
            y:y,
            radius: params.circleSize,
            color: params.circleColor
          })
          console.log(eachAngleDistance, angle, x,y)
        }
      }
      function drawACircle(params){
        context.beginPath();
        context.arc(params.x, params.y, params.radius, 0, 2 * Math.PI);
        context.fillStyle = params.color;
        context.fill();
      }
      $(document).ready(function(){
        $("input").change(function(){
          draw();
        })
        draw();
      });
      function draw(){
        context.clearRect(0, 0, canvas.width*4, canvas.height*4);
        drawACircleOfCircles({
          numberOfCircles:$("#count").val(),
          radius: $("#radius").val(),
          centerX: 2000,
          centerY: 2000,
          circleSize: $("#size").val(),
          circleColor: $("#color").val()
        })
      }
    </script>
    <style>
      input { font-size: 36px;}
      #cbg {
        background: white;
      }
    </style>
  </body>
</html>