所以下面的代码会生成一个圆数组。我希望能够单击一个圆圈并弹出一个窗口,告诉我该圆圈从 (1,1) 开始的行数和列数。
有人知道怎么做吗?
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var gCanvasElement = ctx;
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,800,600);
// Positions are hardcoded to make sure that circle starts from the right place
var startX = 55;
var startY = 55;
console.clear();
for(var i=1;i<=8;i++){
console.group(i);
for(var j=1;j<=i;j++){
ctx.beginPath();
ctx.strokeStyle='green';
//radius is hardcoded to 30 for testing purpose
ctx.arc(startX*j + (j-1)*10,startY*i + (i-1)*10,30,0,2*Math.PI);
ctx.stroke();
//console log
console.group(j);
console.log(startX*j + (j-1)*10);
console.log(startY*i + (i-1)*10);
console.groupEnd(j);
}
console.groupEnd(i);
}
最佳答案
正如我在评论中所写, Canvas 只是一个光栅图像。与矢量图形 (SVG) 不同,它不存储形状。因此,您需要使用数学来确定用户是否单击了圆圈。
http://jsfiddle.net/tarabyte/Jct6j/
function distance(x1, y1, x2, y2) { //helper to get distance between 2 points
return Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
}
function center(i) { //helper to get coordinates of i-th circle
return (i*2-1)*radius + (i-1)*step/2;
}
c.addEventListener('click', function(ev){ //click lister
var x = ev.pageX - c.offsetLeft - (startX - radius), //normalized coords
y = ev.pageY - c.offsetTop - (startY - radius), //normalized coords
grid = 2*radius + step/2,
i, j, d;
if(x < 0 || y < 0) { return;} //out of circles
//cell inside your grid
i = Math.ceil(x/grid);
j = Math.ceil(y/grid);
if(i > j) { return;} //out of circles
d = distance(x, y, center(i), center(j));
if(d > radius) {return;} //to far from center
console.log(i, j);
}, false);
关于javascript - 找出沿圆有多少列和行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24186926/