javascript - HTML5 Canvas - 绘制一个环形扇区

Question

我想绘制具有环形形状的游戏 map (10000x10000)的边缘(因此 map 将是圆形的)。最简单(但性能最差)的方法是绘制一个填充圆(半径为 6000)和一个未填充圆(半径为 5000)。

播放器有一个小视口(viewport)，那么就没有必要画一个完整的环形。一个部门没问题。

我尝试过 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 将是您的主要(也是巨大的)性能损失。您可能应该重构您的设计以避免使用非常大的 Canvas 。