19

[JavaScript] Draw Grid of Dots using Canvas

 2 years ago
source link: http://siongui.github.io/2017/04/18/javascript-canvas-draw-grid-dot/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

[JavaScript] Draw Grid of Dots using Canvas

April 18, 2017

Exercise to draw 3x3 grid of dots via HTML Canvas.

HTML:

<canvas id="gridDots" width="300" height="300"></canvas>

JavaScript:

var c = document.getElementById("gridDots");
var ctx = c.getContext("2d");

var n = 3; // 3x3 grid of dots

for (var i=0; i<n; i++) {
  for (var j=0; j<n; j++) {
    var gridXSideLength = c.width/n;
    var gridYSideLength = c.height/n;
    var x = (gridXSideLength/2) * (i+1);
    var y = (gridYSideLength/2) * (j+1);
    var r = Math.min(gridXSideLength, gridYSideLength) / (n*2);
    var sAngle = 0;
    var eAngle = 2*Math.PI;

    ctx.beginPath();
    ctx.arc(x, y, r, sAngle, eAngle);
    ctx.closePath();
    ctx.stroke();
  }
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK