如何用线条填充Canvas 2D圆形？无需计算圆周坐标点

方法一：用圆锥渐变模拟放射线条 #

利用Canvas的createConicGradient可以快速实现这种效果，不需要手动计算圆周上的坐标点。原理是创建一个以圆心为中心的环形渐变，通过交替添加不透明线条和透明间隔的颜色节点，让渐变呈现出放射状线条的视觉效果。

示例代码：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 100;

// 创建以圆心为中心的圆锥渐变，起始角度0度
const conicGradient = ctx.createConicGradient(0, centerX, centerY);
const lineCount = 60; // 调整这个值可以改变线条数量
const angleStep = 360 / lineCount;

// 循环添加颜色节点，交替生成线条和透明间隔
for (let i = 0; i < lineCount; i++) {
  const startAngle = i * angleStep;
  // 线条起始位置
  conicGradient.addColorStop(startAngle / 360, '#000');
  // 线条结束位置（这里让线条占每个间隔的80%，剩下20%是透明）
  conicGradient.addColorStop((startAngle + angleStep * 0.8) / 360, '#000');
  // 透明间隔起始位置
  conicGradient.addColorStop((startAngle + angleStep) / 360, 'transparent');
}

// 绘制圆形并填充渐变
ctx.fillStyle = conicGradient;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fill();

方法二：用图案填充实现线条效果 #

先在一个临时画布上绘制放射状线条，再将这个画布转成图案填充到目标圆形里，同样不需要计算目标圆形的圆周坐标点。

示例代码：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 100;

// 创建临时画布用来绘制线条图案
const patternCanvas = document.createElement('canvas');
patternCanvas.width = radius * 2;
patternCanvas.height = radius * 2;
const patternCtx = patternCanvas.getContext('2d');

// 在临时画布上绘制放射状线条
patternCtx.strokeStyle = '#000';
patternCtx.lineWidth = 2;
const lineCount = 60;
for (let i = 0; i < lineCount; i++) {
  const angle = (i / lineCount) * Math.PI * 2;
  patternCtx.beginPath();
  // 从临时画布中心（对应目标圆形中心）绘制到边缘
  patternCtx.moveTo(radius, radius);
  patternCtx.lineTo(radius + Math.cos(angle) * radius, radius + Math.sin(angle) * radius);
  patternCtx.stroke();
}

// 将临时画布创建为填充图案
const pattern = ctx.createPattern(patternCanvas, 'no-repeat');

// 绘制目标圆形并填充图案
ctx.fillStyle = pattern;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.fill();

内容的提问来源于stack exchange，提问作者degr