javascript - 使用 HTML5 Canvas 以编程方式绘制此图案

Question

如何使用 HTML5 Canvas 以编程方式绘制下面的图案？

我有画圆圈的逻辑 here 。另外，我可以绘制弧线，请参阅此 bin然而，我正在努力解决将所有这些组合成下面的模式所需的数学问题。

它是 7 条弧，每条弧包含不同数量的圆(从外到内:33、29、26、23、21、18、15)

我不太熟悉 Canvas，但认为它可以解决我的问题。

Answer 1

你可以这样做:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var radius = 200;//outer radius
var rows = 7;//number of rows
var diff = 20;//distance between each row
var circle_count = [33, 29, 26, 23, 21, 18, 15];
for (var j = 0; j < rows; j++) {
  //the circle count to be made
  var count = circle_count.shift();

  var current_radius = radius - j*diff;
  for (var i = 0; i < count; i++) {
    //devide 180 degrees by the number of circle to draw 
    var angle = Math.PI / (count-1) * i*-1;
    //x coordinate
        var x = current_radius * Math.cos(angle) + 300;
    //y coordinate
    var y = current_radius * Math.sin(angle) + 100;
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, 2 * Math.PI);
    ctx.stroke();
  }
}

工作 fiddle here

希望这有帮助!