HTML5キャンバス - 環状セクタを描く

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キャンバスを再描画すると、メイン（と巨大になります）パフォーマンスヒット。非常に大きなキャンバスを避けるために、デザインをリファクタリングする必要があります。