así que estoy tratando de hacer este juego japonés llamado GO y necesito colocar círculos en los bordes como este . He hecho la cuadrícula ahora necesito colocar los círculos allí. Intenté diferentes cosas, como usar el arco en el lienzo con la posición del mouse y colocarlo, pero no funciona. Otra cosa que intenté es hacer una matriz que verifique dónde se cruzan las líneas, pero aún así no hizo nada. No estoy seguro de qué está mal, así que espero que me ayuden a encontrar una manera de colocar los círculos en el tablero cada vez que hago clic con el mouse. Eliminé las cosas que no funcionaron y este es mi código ahora:
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)esto solo hace la grilla
un ejemplo es este:
mouseClicked = function () { ctx.beginPath() ctx.strokeStyle = "black" ctx.ellipse(mouseX, mouseY, 20, 20); ctx.stroke() };otro:
if (mouseIsPressed) { ellipse(200, 200, 180, 180); }no estoy seguro de que sea la forma correcta de hacerlo
Creo que esto debería funcionar:
function rtn(n, r){ return Math.round(n/r)*r; } canvas.onclick = function(event){ ctx.beginPath(); ctx.arc(rtn(event.clientX, 40), rtn(event.clientY, 40), 180, 180, 0, Math.PI * 2); ctx.fillStyle = "black"; ctx.fill(); };ClientX y ClientY tienen documentación aquí