javascript - 尝试用圆圈创建图案？

Question

我正在尝试模仿a pattern我在互联网上找到了，但当我尝试连接顶部的另一组圆圈时，我在中间看到了奇怪的线条。

此外，当我尝试填充时，它变成全黑。

console.log("grid");

var canvas = document.getElementById("canvas");
var image_b = document.getElementById("brown");
var image_g = document.getElementById("grey");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;



var ctx = canvas.getContext("2d");

var side = 160;
var side2 = 150;



ctx.strokeStyle = 'black';
ctx.fillStyle = 'white';

function draw() {

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;


  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
  var widthNbr = Math.ceil(window.innerWidth / side) + 1;
  var heightNbr = Math.ceil(window.innerHeight / side) + 1;

  var counter = 0;
  for (var i = 0; i < widthNbr; i++) {
    for (var j = 0; j < heightNbr; j++) {



      ctx.beginPath();

      var x = side * i + side / 2;
      var y = side * j + side / 2;

      var a = side * i + side / 2;
      var s = side * j + side / 2;

      var d = side * i + side / 2;
      var f = side * j + side / 2;

      var g = side * i + side / 2;
      var h = side * j + side / 2;

      var q = side * i + side / 2;
      var w = side * j + side / 2;

      var o = side * i + side / 2;
      var p = side * j + side / 2;


      var x1 = side2 * i + side2;
      var y1 = side2 * j + side2;

      var a1 = side2 * i + side2;
      var s1 = side2 * j + side2;

      var d1 = side2 * i + side2;
      var f1 = side2 * j + side2;

      var g1 = side2 * i + side2;
      var h1 = side2 * j + side2;

      var q1 = side2 * i + side2;
      var w1 = side2 * j + side2;

      var o1 = side2 * i + side2;
      var p1 = side2 * j + side2;


      ctx.arc(x, y, side / 2, 0, Math.PI * 2);
      ctx.arc(a, s, side / 2.5, 0, Math.PI * 2);
      ctx.arc(d, f, side / 3.5, 0, Math.PI * 2);
      ctx.arc(g, h, side / 5.3, 0, Math.PI * 2);
      ctx.arc(q, w, side / 9, 0, Math.PI * 2);
      ctx.arc(o, p, side / 18, 0, Math.PI * 2);
      ctx.lineWidth = 5;

      ctx.arc(x1, y1, side2 / 2, 0, Math.PI * 2);
      ctx.arc(a1, s1, side2 / 2.5, 0, Math.PI * 2);
      ctx.arc(d1, f1, side2 / 3.5, 0, Math.PI * 2);
      ctx.arc(g1, h1, side2 / 5.3, 0, Math.PI * 2);
      ctx.arc(q1, w1, side2 / 9, 0, Math.PI * 2);
      ctx.arc(o1, p1, side2 / 18, 0, Math.PI * 2);




      ctx.stroke();
      // ctx.fill();

      ctx.closePath();
      counter++;


    }
  }

}

draw();

<canvas id="canvas"></canvas>

Answer 1

您必须将 Canvas 路径绘图视为纸上的铅笔绘图:

在路径声明 ( beginPath ) 之后，当您说 ctx.arc(x, y, rad, 0, Math.PI*2) 时，您的笔将转到坐标 (x, y)，并且因为 x 和 y 是 arc 的中心位置它将被放置在距该中心 rad 距离处以绘制圆。您的 0 告诉它从 3 点钟开始，因此在本例中，我们只需将此 rad 添加到 x 值即可。

此时，你的笔已在纸上。

它绘制圆弧，当你告诉它arc(x1, y1, rad, ...)时，它会直接转到坐标(x1+rad, y1) 并绘制新的圆弧。

这里的问题是，您从未告诉它从纸上举起铅笔，因此您可以看到从第一个弧上的最后一个点到下一个弧上的第一个点的线。

幸运的是，Canvas API 附带了一组方便的操作，“Raise_the_pen_and_move_to_coordinates_x,y_without_ruining_my_paper”简单地称为 moveTo .

通过告诉上下文轻轻举起铅笔并移动到下一个第一个绘制点，在实际绘制圆弧之前，您将避免所有这些尾随线。

所以基本上，对于三个弧来说它是:

// initialize a new drawing
ctx.beginPath();
// here we can set it directly because the pen is not on the paper yet
ctx.arc(x, y, rad, 0, Math.PI*2);
// tell it to raise the pen off the paper
//  and to go to the next starting point (3 o'clock in our case)
ctx.moveTo(x1 + rad, y1);
ctx.arc(x1, y1, rad, 0, Math.PI*2);
// once again
ctx.moveTo(x2 + rad, y2);
ctx.arc(x2, y2, rad, 0, Math.PI*2);
// now we've got clear independents arcs
ctx.stroke();

使用您的代码_{(顺便说一句，您可以使用数组清理很多内容)}

var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var ctx = canvas.getContext("2d");

var side = 160;
var side2 = 150;

ctx.strokeStyle = 'black';
ctx.fillStyle = 'white';

function draw() {

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
  var widthNbr = Math.ceil(window.innerWidth / side) + 1;
  var heightNbr = Math.ceil(window.innerHeight / side) + 1;

  var counter = 0;
  for (var i = 0; i < widthNbr; i++) {
    for (var j = 0; j < heightNbr; j++) {

      ctx.beginPath();

      var x = side * i + side / 2;
      var y = side * j + side / 2;

      var a = side * i + side / 2;
      var s = side * j + side / 2;

      var d = side * i + side / 2;
      var f = side * j + side / 2;

      var g = side * i + side / 2;
      var h = side * j + side / 2;

      var q = side * i + side / 2;
      var w = side * j + side / 2;

      var o = side * i + side / 2;
      var p = side * j + side / 2;


      var x1 = side2 * i + side2;
      var y1 = side2 * j + side2;

      var a1 = side2 * i + side2;
      var s1 = side2 * j + side2;

      var d1 = side2 * i + side2;
      var f1 = side2 * j + side2;

      var g1 = side2 * i + side2;
      var h1 = side2 * j + side2;

      var q1 = side2 * i + side2;
      var w1 = side2 * j + side2;

      var o1 = side2 * i + side2;
      var p1 = side2 * j + side2;

      ctx.moveTo(x + side / 2, y);
      ctx.arc(x, y, side / 2, 0, Math.PI * 2);
      ctx.moveTo(a + side / 2.5, s);
      ctx.arc(a, s, side / 2.5, 0, Math.PI * 2);
      ctx.moveTo(d + side / 3.5, f)
      ctx.arc(d, f, side / 3.5, 0, Math.PI * 2);
      ctx.moveTo(g + side / 5.3, h)
      ctx.arc(g, h, side / 5.3, 0, Math.PI * 2);
      ctx.moveTo(q + side / 9, w)
      ctx.arc(q, w, side / 9, 0, Math.PI * 2);
      ctx.moveTo(o + side / 18, p)
      ctx.arc(o, p, side / 18, 0, Math.PI * 2);
      ctx.lineWidth = 5;

      ctx.moveTo(x1 + side2 / 2, y1)
      ctx.arc(x1, y1, side2 / 2, 0, Math.PI * 2);
      ctx.moveTo(a1 + side2 / 2.5, s1)
      ctx.arc(a1, s1, side2 / 2.5, 0, Math.PI * 2);
      ctx.moveTo(d1 + side2 / 3.5, f1)
      ctx.arc(d1, f1, side2 / 3.5, 0, Math.PI * 2);
      ctx.moveTo(g1 + side2 / 5.3, h1)
      ctx.arc(g1, h1, side2 / 5.3, 0, Math.PI * 2);
      ctx.moveTo(q1 + side2 / 9, w1)
      ctx.arc(q1, w1, side2 / 9, 0, Math.PI * 2);
      ctx.moveTo(o1 + side2 / 18, p1)
      ctx.arc(o1, p1, side2 / 18, 0, Math.PI * 2);

      ctx.stroke();

      counter++;

    }
  }

}

draw();

<canvas id="canvas"></canvas>

正如 Spencer Wieczorek 在上面的评论中正确指出的那样，为了获得您想要的结果，您还必须填充最大的弧线，但我让您找到了作为训练的方法。

<小时/>

另外，关于 closePath() 的一个小注释您在代码中使用的名称，当我们看到滥用它的人数时，他的名字可能会非常令人困惑，但请注意，它不会结束您的 Path 声明。它所做的只是一个lineTo(last_time_I_putted_the_pencil)。在闭合圆圈的情况下，它没有任何效果，因为last_time_I_putted_the_pencil === current_pencil_position_on_the_paper，但它通常是很多问题的根源。

<小时/>

还有一个小注意事项，对于更有经验的用户(可能在几天/几周内 OP):
其他操作允许我们从纸上举起铅笔:转换命令。
(主要是 setTransform 及其子集 transform、translate、rotate 和 scale)。
这些操作将首先举起笔，然后移动纸而不是笔。这在很多情况下都很方便。
要将其设置回正常位置，您只需调用 setTransform(1,0,0,1,0,0)。