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/
这篇关于如何在网格(画布)中的特定位置放置圆的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:如何在网格(画布)中的特定位置放置圆
基础教程推荐
猜你喜欢
- 动态更新多个选择框 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01