我无法在正方形内的画布上画一个圆

Question

我有一个问题，我是法国人，我的英语不太好。我来解释一下这个问题:我在js中绘制了一个由6行和7列组成的画布，然后我尝试用单击事件在其中绘制一个圆圈。然而，我不能设法定位在画布上的圆圈点击良好的比例里面。我试着点击鼠标的位置，然后在正方形中定位我的圆圈，我失败了。然后我改变了我的策略，我试着将画布存储在一张表中，然后尝试将圆圈推入画布的正方形，想象它位于画布的正方形的限制中，但再次失败。

javascript

const canvas = document.getElementById('grille');
const ccc = canvas.getContext('2d');
let i = 0,l = 0;
let x = 10,y = 10;
let tabC = [];
let tabtab = [];
let cnvx = -40,cnvy = 560;
let posiX = 0,posiY = 0;
let test;
// fonction dessine caneva
(function (){
for (l = 0; l < 6; l++) {
for (i = 0; i < 7; i++) {
tabtab.push(ccc.strokeRect(x, y, 100, 100));
tabC.push('');
x += 100;
}
y += 100;
x = 10;
}console.log("tabtab : "+tabtab);
})();
canvas.addEventListener('click', function (e) {
posiX = e.offsetX;
posiY = e.offsetY;
console.log((e.offsetX)+ ' , ' + (e.offsetY));
for (let j = 0;j<tabC.length;j++){
if (tabC[j]===''){
tabC.push('0');
ccc.beginPath();
ccc.fillStyle = 'red';
tabtab.push(ccc.arc(e.offsetX, e.offsetY , 40, 30, 0, 2 * Math.PI));
ccc.fill();
ccc.closePath();
}
}

输入图片描述

Answer 1

我创建了一个示例，通过计算网格坐标将圆圈放置在网格中。

它通过应用数学运算将点击的像素坐标转换为网格正方形。Floor function用于减去网格的顶角并除以网格的大小:

let gridX = Math.floor((mouseX - startX) / gridSize);
let gridY = Math.floor((mouseY - startY) / gridSize);

然后通过将网格坐标转换回像素坐标并添加网格正方形大小的一半来计算网格正方形的中心

let pixelX = startX + gridX * gridSize + gridSize / 2;
let pixelY = startY + gridY * gridSize + gridSize / 2;

作为奖励，我还添加了一个数组gridState，用于跟踪已填充的正方形。已填满的方格为真，其他方格为假。