Question

我想要实现的是一堆以某种方式对齐的圆圈（在本例中为顶部），就像你在Adobe Illustrator这样的程序中所做的那样。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var maxCircle = 20;
var y = 0;
var radius = 10;

ctx.translate(500,500);

//Draw January
for (var i = 0; i <= 31; i++) {
      ctx.beginPath();
      ctx.arc(0, y, i*radius, 0, 2*Math.PI);
      ctx.stroke();
      ctx.rotate(2*Math.PI/maxCircle);
  }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body style="background-color: #fff;">

    <canvas id="canvas" width="2000" height="2000" style="border: 1px solid black;">
    </canvas>

    <script src="script.js"></script>

  </body>
</html>

如何在一侧对齐所有生成的圆圈？

例如，将它们对齐在一条顶行？

var maxCircle = 20;
var y = 0;
var radius = 10;

ctx.translate(1000,1000);

for (var i = 0; i <= 31; i++) {
      ctx.beginPath();
      ctx.arc(0, y, i*radius, 0, 2*Math.PI);
      ctx.stroke();
      ctx.rotate(2*Math.PI/maxCircle);
  }

Answer 1

您的圈子的半径越来越大。如果您想将它们与顶行对齐，那么最好不要使用ctx.rotate：这对于达到该结果无效。

而是引入变量 x 并使用现有的 y 来计算每个圆圈的中心位置：

var ctx = cvs.getContext("2d");
var x = 0;
var y = 0;
var radius = 10;

ctx.translate(10,2); // adjust translation so first circle appears in top-left corner

for (var i = 0; i <= 31; i++) {
  x += i*radius;
  ctx.beginPath();
  ctx.arc(x, y, i*radius, 0, 2*Math.PI);
  ctx.stroke();
  x += i*radius;
  y += radius;
}

<canvas id="cvs" width="610" height="180"></canvas>

将圆圈对齐在顶部

1 个答案: