所以我正在嘗試制作這個名為 GO 的游戲，我需要像這樣在邊緣放置圓圈。我已經制作了網格，現在需要將圓圈放在那里。我嘗試了不同的方法，例如在畫布中使用帶有滑鼠位置的弧并放置它，但它不起作用我嘗試的其他方法是創建一個陣列來檢查線條交叉的位置，但它仍然沒有做任何事情。但我可能做錯了。我不確定出了什么問題，所以希望你們能幫助我找到一種方法，每次我點擊滑鼠時將圓圈放在板上。我已經洗掉了不起作用的東西，現在這是我的代碼：
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/
uj5u.com熱心網友回復：
您首先需要將 更改ellipse(...)為ctx.ellipse(...)，因為 ellipse 不是全域函式，而是 CanvasRenderingContext2D 的一種方法。
通過檔案，我還發現這個函式需要 7 個引數，所以為radiusX, radiusY, rotation, startAngle, endAngle. 這也是完成結果的小提琴：https ://jsfiddle.net/c6udn9gf/8/
uj5u.com熱心網友回復：
這會讓你接近，但你需要用你的舍入函式找出一些東西。
canvas.onclick = function (event) {
ctx.beginPath();
const x = rtn(event.clientX, 40);
const y = rtn(event.clientY, 40);
ctx.ellipse(x - 20, y - 20, 10, 10, 0, 0, 360);
ctx.fill();
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/418763.html
標籤：