Javascript HTML5画布-绘制环形扇区

我想画一个环形的游戏地图（10000x1000）的边缘（所以地图是圆形的）。最简单（但性能最差）的方法是绘制一个填充圆（半径6000）和一个未填充圆（半径5000）

玩家有一个小视口，那么就不需要画一个完整的环形。一个部门是好的

我试过使用ctx.arc，但它让我产生了共鸣

有没有有效的方法在画布2D上绘制一个巨大的环形扇区

---

您的形状是一个冲程圆弧：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var strokewidth=100；
var cx=cw/2；
var-cy=ch/2；
var-PI=Math.PI；
变量半径=数学最小值（cw，ch）/2-冲程宽度/2；
ctx.线宽=冲程宽度；
ctx.lineCap='butt'；
ctx.beginPath（）；
ctx.弧（cx，cy，半径，-PI*3/4，-PI/16）；
ctx.strokeStyle='mediumVioletRed'；
ctx.stroke（）
body{背景色：白色；}
#画布{边框：1px纯红；}
您的形状是一个冲程圆弧：



var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var strokewidth=100；
var cx=cw/2；
var-cy=ch/2；
var-PI=Math.PI；
变量半径=数学最小值（cw，ch）/2-冲程宽度/2；
ctx.线宽=冲程宽度；
ctx.lineCap='butt'；
ctx.beginPath（）；
ctx.弧（cx，cy，半径，-PI*3/4，-PI/16）；
ctx.strokeStyle='mediumVioletRed'；
ctx.stroke（）
body{背景色：白色；}
#画布{边框：1px纯红；}
只是想指出您忘记包含
ctx.lineCap=“butt”。画布
lineCap
状态可能是
round
或
square
结果将不是所需的。@Blindman67。说得好。即使默认为“butt”，也有可能当前的
lineCap
不是默认值。谢谢你的第二双眼睛。：-）只是要指出，您忘了包含
ctx.lineCap=“butt”。画布
lineCap
状态可能是
round
或
square
结果将不是所需的。@Blindman67。说得好。即使默认为“butt”，也有可能当前的
lineCap
不是默认值。谢谢你的第二双眼睛。：-）