如何在网格(画布)中的特定位置放置圆 [英] how do i place a circle on specific places in grid (canvas)

问题描述

所以我正在试着做一个叫围棋的游戏，我需要在像this这样的边缘放上圆圈。我已经创建了网格，现在需要在其中放置圆圈。我尝试了不同的方法，比如使用画布上的圆弧和鼠标位置，但是它不起作用。我试着做了一个数组来检查线条相交的位置，但是它仍然没有做任何事情。但是我可能做错了。我不确定出了什么问题，所以希望你们能帮助我找到一种方法，在每次我点击鼠标的时候把圆圈放在黑板上。我已经删除了不起作用的东西，这是我现在的代码：

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);
};

我不确定这样做是否正确

也许可以将所有可能的位置组成一个数组来放置圆，但我不确定如何放置

如果您想测试一下https://jsfiddle.net/pwe0vx7o/

，这里有一把小提琴

推荐答案

您首先需要将ellipse(...)更改为ctx.ellipse(...)，因为椭圆不是全局函数，而是CanvasRenderingContext2D的方法。

到the docs我还发现该函数接受7个参数，因此为radiusX, radiusY, rotation, startAngle, endAngle添加了一个参数。 以下也是完成结果的小提琴：https://jsfiddle.net/c6udn9gf/8/

这篇关于如何在网格(画布)中的特定位置放置圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！