用不同的笔画重量画圆

Question

如何绘制这个圆圈的内部蓝色切片，以模拟不同的笔画重量。

我尝试了一种方法，通过在圆的每个角度上绘制小圆并增加圆的某些部分的半径来绘制笔画。但这并没有给出正确的结果，因为圆在边缘被“像素化”了，并且它向外倾斜了圆。

Answer 1

没有简单的方法可以做到这一点。部分困难在于，p5.js 用于绘制图形的底层技术 Canvas 也不支持可变笔画粗细。在具有类似限制的 Scalable Vector Graphics 中，实现此目的的最佳方法是将形状描述为外周长和内部空隙的周长，然后在没有任何笔划的情况下填充形状。我认为 Canvas 会支持这种方法，但我不认为使用 p5.js 可以轻松完成，因为现在使用beginShape()/bezierVertex() 绘制贝塞尔曲线时可以跳转到新位置。但是，您可以在 p5.js 中执行此操作的一种方法是填充外部形状，然后“移除”内部空隙。如果您想在其他现有图形之上绘制它，那么最好的方法是将此形状绘制到单独的 p5.Graphics 对象上，然后使用 image() 将其绘制到主画布上：

let sprite;

function setup() {
  createCanvas(windowWidth, windowHeight);
  sprite = createGraphics(100, 100);
  sprite.noStroke();
  sprite.fill('black');
  sprite.angleMode(DEGREES);
  sprite.circle(50, 50, 100);
  // switch to removing elements from the graphics
  sprite.erase();
  // Translate and rotate to match the shape you showed in your question
  sprite.translate(50, 50);
  sprite.rotate(-45);
  // Remove a perfect semi circle from one half, producing regular 5px stroke circle
  sprite.arc(0, 0, 90, 90, -90, 90);
  // Remove a half-ellipse from the other side of the circle, but this time the
  // height matches the previous arc, but the width is narrower.
  // Note: the angles for this arc overlap the previous removal by a few degrees
  // to prevent there from being a visible seam in between the two removed shapes.
  sprite.arc(0, 0, 70, 90, 85, 275, OPEN);
}

function draw() {
  background('lightgray');
  image(sprite, mouseX - 50, mouseY - 50);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>