如何在网格(画布)中的特定位置放置圆

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/

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

本文标题为:如何在网格(画布)中的特定位置放置圆

基础教程推荐