绘制具有不同笔划粗细的圆

Question

如何绘制这个圆圈的内部蓝色切片，以模拟不同的笔划粗细。

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

Answer 1

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

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>

绘制具有不同笔划粗细的圆

draw circle with varying stroke weight

processing

p5.js