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

【问题标题】：Programmatically draw this pattern with HTML5 Canvas使用 HTML5 Canvas 以编程方式绘制此图案
【发布时间】：2016-04-28 18:28:43
【问题描述】：

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

我有绘制圆圈here 的逻辑。此外，我可以绘制弧线，请参阅 thisbin，但是我正在努力解决将它们全部组合成以下模式所需的数学。

它是 7 个弧，每个包含不同数量的圆（从外到内：33、29、26、23、21、18、15）

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

【问题讨论】：

你有没有尝试过？
你试过只画一行吗？
确实，我有逻辑在这里画圆圈jsbin.com/degurexaxa/edit?html,js,output，我可以画弧线，请参阅：jsbin.com/dikogugafu/edit?html,js,output 我更难以将它们组合在一起的数学运算。我将使用上述链接更新我的问题，如果您否决了您重新考虑的问题，我将不胜感激。我只是在探索 Canvas 作为一种选择。

标签： javascript html canvas html5-canvas drawing

【解决方案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();
  }
}

工作小提琴here

希望这会有所帮助！

【讨论】：