Jetpack Compose：如何使用Canvas绘制此类路径/线条？

你给出的图是带有中心光晕、放射网格线和外层渐变环的深色背景效果，拆解成以下步骤实现：

1. 搭建画布基础 #

先获取Canvas元素并设置尺寸适配窗口，避免拉伸变形：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 适配窗口大小
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

2. 绘制深色渐变背景 #

用径向渐变实现中心稍亮、边缘暗沉的背景效果：

function drawBackground() {
  const centerX = canvas.width/2;
  const centerY = canvas.height/2;
  // 创建从中心向外扩散的径向渐变
  const bgGradient = ctx.createRadialGradient(
    centerX, centerY, 0,
    centerX, centerY, Math.max(canvas.width, canvas.height)/2
  );
  bgGradient.addColorStop(0, '#1a1a2e'); // 中心深色
  bgGradient.addColorStop(1, '#0f0f1e'); // 边缘更深色
  ctx.fillStyle = bgGradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

3. 绘制中心发光光晕 #

用径向渐变实现中心亮白、向外过渡到透明的光晕效果：

function drawCenterGlow() {
  const centerX = canvas.width/2;
  const centerY = canvas.height/2;
  const glowGradient = ctx.createRadialGradient(
    centerX, centerY, 0,
    centerX, centerY, 80 // 光晕扩散范围
  );
  glowGradient.addColorStop(0, '#ffffff'); // 中心纯白
  glowGradient.addColorStop(0.3, '#4ecdc4'); // 过渡到青蓝色
  glowGradient.addColorStop(1, 'rgba(78, 205, 196, 0)'); // 完全透明
  ctx.fillStyle = glowGradient;
  ctx.beginPath();
  ctx.arc(centerX, centerY, 80, 0, Math.PI*2);
  ctx.fill();
}

4. 绘制放射状网格线 #

通过循环批量绘制环形和放射线条，调整透明度让线条更柔和：

function drawGrid() {
  const centerX = canvas.width/2;
  const centerY = canvas.height/2;
  const maxRadius = Math.max(canvas.width, canvas.height)/2;
  
  // 绘制环形网格
  ctx.strokeStyle = 'rgba(78, 205, 196, 0.15)';
  ctx.lineWidth = 1;
  for(let r = 50; r < maxRadius; r += 50) { // 每隔50px画一个环
    ctx.beginPath();
    ctx.arc(centerX, centerY, r, 0, Math.PI*2);
    ctx.stroke();
  }
  
  // 绘制放射线条
  for(let angle = 0; angle < Math.PI*2; angle += Math.PI/12) { // 每隔15度画一条线
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(
      centerX + Math.cos(angle)*maxRadius,
      centerY + Math.sin(angle)*maxRadius
    );
    ctx.stroke();
  }
}

5. 添加外层渐变圆环 #

用径向渐变做描边，实现外层淡蓝色渐变环效果：

function drawOuterRing() {
  const centerX = canvas.width/2;
  const centerY = canvas.height/2;
  const ringRadius = Math.max(canvas.width, canvas.height)/2 - 20;
  const ringGradient = ctx.createRadialGradient(
    centerX, centerY, ringRadius - 10,
    centerX, centerY, ringRadius + 10
  );
  ringGradient.addColorStop(0, 'rgba(78, 205, 196, 0)');
  ringGradient.addColorStop(0.5, 'rgba(78, 205, 196, 0.3)');
  ringGradient.addColorStop(1, 'rgba(78, 205, 196, 0)');
  ctx.strokeStyle = ringGradient;
  ctx.lineWidth = 20;
  ctx.beginPath();
  ctx.arc(centerX, centerY, ringRadius, 0, Math.PI*2);
  ctx.stroke();
}

可选：添加缓慢旋转动画 #

如果需要网格缓慢旋转的动态效果，用requestAnimationFrame实现循环：

let rotation = 0;
function animate() {
  drawBackground();
  drawOuterRing();
  
  // 保存画布状态，旋转后恢复
  ctx.save();
  ctx.translate(canvas.width/2, canvas.height/2);
  ctx.rotate(rotation);
  ctx.translate(-canvas.width/2, -canvas.height/2);
  drawGrid();
  ctx.restore();
  
  drawCenterGlow();
  rotation += 0.002; // 控制旋转速度
  requestAnimationFrame(animate);
}
// 启动动画
animate();

可查阅的参考内容 #

• Canvas渐变API：createRadialGradient、createLinearGradient，用于实现各类发光、渐变效果
• Canvas路径绘制：arc（绘制圆形）、lineTo（绘制直线）等基础方法的用法
• Canvas变换API：translate、rotate，用于实现元素的平移、旋转操作
• Canvas动画：requestAnimationFrame的使用，实现流畅的循环动画

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