HTML5画布-绘制环形扇形

兹贝恩斯

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

播放器的视口很小,因此不必绘制整个环形。一个部门很好。

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

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

在此处输入图片说明

您的形状是描边弧线:

在此处输入图片说明

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画布将是您的主要(也是巨大的)性能表现。您可能应该重构设计,以免画布过大。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章