时间戳

首页 > 解决方案 > 如何使用 Canvas JS 制作多个圆圈

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

问题描述

我有一个功能，当我单击按钮时会生成一个圆圈，但如果我继续单击该按钮，它只会将圆圈复制到同一个位置。我试图找出一种方法来制作具有不同 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();
    }
  }
}

标签： javascriptcanvas

解决方案

目前，您将圆圈放在预定位置：

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

这是画布元素的中心。作为旁注 - 变量名称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 是由同名变量 radius 确定的圆的半径，水平位置 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>

推荐阅读