HTML5 Canvas - 画一个环形扇区

Question

我想用环形绘制游戏地图 (10000x10000) 的边缘（这样地图就会是圆形的）。最简单（但性能最差）的方法是绘制一个填充圆（半径为 6000）和一个未填充圆（半径为 5000）。

播放器的视口很小，那就没必要画一个完整的环形了。一个扇区就好了。

我试过ctx.arc，但它给了我一个和弦...

有没有一种有效的方法可以在 canvas2D 上绘制一个巨大的环形扇区？

Answer 1

你的形状是描边弧线：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var strokewidth=100;
var cx=cw/2;
var cy=ch/2;
var PI=Math.PI;
var radius=Math.min(cw,ch)/2-strokewidth/2;
ctx.lineWidth=strokewidth;
ctx.lineCap='butt';
ctx.beginPath();
ctx.arc(cx,cy,radius,-PI*3/4,-PI/16);
ctx.strokeStyle='mediumVioletRed';
ctx.stroke();

body{ background-color:white; }
#canvas{border:1px solid red; }

<canvas id="canvas" width=378 height=378></canvas>

旁白：重绘 10K x 10K canvas 将是您的主要（也是巨大的）性能损失。您可能应该重构您的设计以避免非常大的 canvases.

HTML5 Canvas - 画一个环形扇区

HTML5 Canvas - Draw an annular sector

javascript

html

canvas

donut-chart