HTML5 Canvas - 绘制一个环形扇区

Question

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

玩家有一个小视口，然后没有必要绘制整个环形。一个部门很好。

我尝试使用ctx.arc，但它给了我一个和弦......

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

{{3}}

Answer 1

你的形状是一条抚摸弧：

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Aside：重绘10K x 10K画布将是您的主要（和巨大的）性能打击。你可能应该重构你的设计，以避免画大幅。