Question

我有一个函数，当我单击一个按钮时会画一个圆圈，但是如果我继续单击按钮，它只会将圆圈复制到同一位置。我试图找出一种方法来制作多个具有不同xy位置的圆。我有下面的代码

function nerdsAssemble(){
  var canvas = document.getElementById("boop");
if (canvas.getContext)
  {
    var con=canvas.getContext("2d");
    var W=canvas.width / 2;
    var H=canvas.height / 2;
    var rad=45;
    con.beginPath();
    con.arc(W, H, rad, 0, 2 * Math.PI, false);
    con.stroke();
    }
  }
}

Answer 1

此刻，您正在将圆圈放置在预定位置：

var W=canvas.width / 2;
var H=canvas.height / 2;

这是canvas元素的中心。附带说明-变量名称 W 和 H 有点误导，因为 arc（）函数的相应参数实际上是x和y位置。无论如何，如果要在随机位置上有圆，可以使用 Math.random（）函数。它会返回一个介于0和1之间的随机数。如果将其乘以画布的宽度/高度，则会在画布周围到处都是圆圈。

function nerdsAssemble() {
  var canvas = document.getElementById("boop");
  if (canvas.getContext) {
    var con = canvas.getContext("2d");
    var W = Math.random() * canvas.width;
    var H = Math.random() * canvas.height;
    var rad = 45;
    con.beginPath();
    con.arc(W, H, rad, 0, 2 * Math.PI, false);
    con.stroke();
  }

}
document.getElementById("myButton").addEventListener("click", nerdsAssemble);

<canvas id="boop" width="400" height="300"></canvas>
<button id="myButton">
Circle
</button>

跟进

如果您希望新的圈子从左到右并排出现，我们需要进行一些更改。首先，我们需要一些变量来保持圆的位置。我们将其称为xPosition和yPosition。 xPosition的初始值应为45。为什么是45？ 45是圆的半径，由同名的可变半径确定，水平位置45表示我们正在触摸画布的左侧。

现在，如果在绘制一个圆后将xPosition的半径增加* 2（90是圆的直径），则下一个圆将在最后一个圆旁边。

以下是一些代码：

var canvas = document.getElementById("boop");
var radius = 45;
var xPosition = radius;
var yPosition = canvas.height / 2;
var con = canvas.getContext("2d");

function nerdsAssemble() {
  con.beginPath();
  con.arc(xPosition, yPosition, radius, 0, 2 * Math.PI, false);
  con.stroke();
  xPosition += radius * 2;
}
document.getElementById("myButton").addEventListener("click", nerdsAssemble);

<canvas id="boop" width="400" height="300"></canvas>
<button id="myButton">
Circle
</button>

如何使用Canvas JS制作多个圆圈

1 个答案:

跟进