我如何在网格中的特定位置放置一个圆圈 (canvas)

Question

所以我正在尝试制作这款名为 GO 的游戏，我需要在边缘放置圆圈，例如 this。我已经制作了网格，现在需要将圆圈放在那里。我尝试了不同的方法，比如在 canvas 中使用鼠标位置的圆弧并放置它，但它不起作用我尝试的其他事情是制作一个数组来检查线交叉的位置，但它仍然没有做任何事物。但我可能做错了。我不确定出了什么问题，所以希望你们能帮我找到一种方法，让我每次单击鼠标时都能在板上放置圆圈。我已经删除了不起作用的东西，现在这是我的代码：

const canvas = document.getElementById("myCanvas")
const ctx = canvas.getContext("2d")
//canvas.style.border = "1px solid black"
let w = ctx.canvas.width
let h = ctx.canvas.height


goBoard = []
goCheckBoard = []

function drawGrid(w, h) {

    for (x = 0; x <= w; x += 40) {
        for (y = 0; y <= h; y += 40) {
            ctx.moveTo(x, 0);
            ctx.lineTo(x, h);
            ctx.stroke();
            ctx.moveTo(0, y);
            ctx.lineTo(w, y);
            ctx.stroke();
        }
    }
}

drawGrid(400, 400)

这只是网格

我试过的一个例子是：

mouseClicked = function () {
    ctx.beginPath()
    ctx.strokeStyle = "black"
    ctx.ellipse(mouseX, mouseY, 20, 20);
    ctx.stroke()
};

另一个：

function rtn(n, r){
    return Math.round(n/r)*r;
}
canvas.onclick = function(event){
    ellipse(rtn(event.clientX, 40), rtn(event.clientY, 40), 180, 180);
};

我不确定这样做是否正确

也许可以制作一个包含所有可能放置圆圈的位置的数组，但我不确定如何

这里有 fiddle 如果你想测试一下 https://jsfiddle.net/pwe0vx7o/

Answer 1

这会让你接近，但你需要用你的舍入函数找出一些东西。

canvas.onclick = function (event) {
  ctx.beginPath();
  const x = rtn(event.clientX, 40);
  const y = rtn(event.clientY, 40);
  ctx.ellipse(x - 20, y - 20, 10, 10, 0, 0, 360);
  ctx.fill();
};

Answer 2

首先需要将ellipse(...)改为ctx.ellipse(...)，因为ellipse不是全局函数，而是CanvasRenderingContext2D的一个方法

通过 the docs 我还发现这个函数有 7 个参数，所以为 radiusX, radiusY, rotation, startAngle, endAngle 添加了一个。这里还有一个 fiddle 的完成结果：https://jsfiddle.net/c6udn9gf/8/

我如何在网格中的特定位置放置一个圆圈 (canvas)

how do i place a circle on specific places in grid (canvas)

javascript

arrays

canvas

html5-canvas