javascript - 函数 arc() 无法在 p5.js 中正确呈现

Question

我正在用 p5.js 制作一个小程序，但我发现了一些奇怪的东西。当尺寸很大时，arc() 函数似乎无法正确呈现。

这是我的代码:

var ellipseSize = 200;
var strokeSize = 60;

for(var j=0; j<filteredTrees.length; j++){
  strokeWeight(strokeSize);
  var rad = 0;
  for(var i =0; i < filteredTrees[j].trees.length; i++){
    var element = filteredTrees[j].trees[i];
    var radBegin = rad;
    rad += (element.nbr/filteredTrees[j].rangeNbr)*(2*PI);
    stroke(element.color.red, element.color.green, element.color.blue);
    arc(width/2, height/2, ellipseSize, ellipseSize, radBegin, rad);
  }
  ellipseSize += (strokeSize*2);
  strokeSize *= 0.9;
}

这是渲染图像，黑色圆圈表示圆弧应具有的正确对齐方式。一些弧线超出了它们的预期位置，正如您在下面看到的那样:

你知道它为什么这样做吗？

Answer 1

我不确定您使用的是什么渲染器，默认的 2D 渲染器在 Angular 之间使用贝塞尔曲线: https://github.com/processing/p5.js/blob/0.6.1/src/core/p5.Renderer2D.js#L430

所以，没有办法提高圆弧分辨率...

我会推荐你​​使用 sin 和 cosine 来画弧线:

function setup(){
  createCanvas(200, 100);
  customArc(20, 50, 20, 20, 0, PI, PI/2);
  customArc(60, 50, 20, 20, 0, PI, PI/4);
  customArc(100, 50, 20, 20, 0, PI, PI/10);
}

function customArc(x, y, w, h, start, stop, resolution){
  beginShape();
  for(var i = start; i < stop; i += resolution){
    vertex(x + sin(i) * w, y + cos(i) * h);
  }
  endShape();
}

<script src="https://github.com/processing/p5.js/releases/download/0.7.2/p5.min.js"></script>