Web 图形 API 教程从 HTML5 到 WebGPU

/**
 * 【参考示例 · Canvas 2D】粒子星空
 * 演示：create2D（自动 DPR 适配）、rafLoop 帧循环、参数面板、清理函数。
 */
import { create2D, rafLoop, cleanupAll } from '../shared/runtime.js'
import { createPanel } from '../shared/ui.js'
import { hsl } from '../shared/math.js'

export default function (container) {
  const view = create2D(container, { width: 640, height: 360, background: '#0b1220' })
  const { ctx } = view

  let count = 140
  let speed = 1
  let hue = 205
  let paused = false
  let stars = []

  function reset() {
    stars = Array.from({ length: count }, () => ({
      x: Math.random() * view.width,
      y: Math.random() * view.height,
      z: 0.25 + Math.random() * 0.75,
      r: Math.random() * 1.6 + 0.4
    }))
  }

  function draw(time) {
    const { width: w, height: h } = view
    ctx.fillStyle = '#0b1220'
    ctx.fillRect(0, 0, w, h)

    // 中心光晕
    const glow = ctx.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, Math.max(w, h) / 2)
    glow.addColorStop(0, hsl(hue, 0.7, 0.28, 0.55))
    glow.addColorStop(1, 'rgba(11, 18, 32, 0)')
    ctx.fillStyle = glow
    ctx.fillRect(0, 0, w, h)

    const dt = paused ? 0 : 0.016 * speed
    const cx = w / 2
    const cy = h / 2

    for (const s of stars) {
      if (!paused) {
        s.x += (s.x - cx) * 0.06 * dt * s.z * 6
        s.y += (s.y - cy) * 0.06 * dt * s.z * 6
        if (s.x < -10 || s.x > w + 10 || s.y < -10 || s.y > h + 10) {
          const angle = Math.random() * Math.PI * 2
          s.x = cx + Math.cos(angle) * 6
          s.y = cy + Math.sin(angle) * 6
          s.z = 0.25 + Math.random() * 0.75
        }
      }
      ctx.beginPath()
      ctx.arc(s.x, s.y, s.r * s.z * 2, 0, Math.PI * 2)
      ctx.fillStyle = hsl(hue + s.z * 40 + Math.sin(time + s.x * 0.01) * 12, 0.85, 0.55 + s.z * 0.3, 0.35 + s.z * 0.65)
      ctx.fill()
    }

    ctx.font = '13px ui-monospace, monospace'
    ctx.fillStyle = 'rgba(255,255,255,0.55)'
    ctx.fillText(`canvas: ${w}×${h} CSS px · dpr ${view.dpr} · 后备存储 ${view.pixelWidth}×${view.pixelHeight}`, 12, h - 12)
  }

  reset()
  const loop = rafLoop(draw)

  const panel = createPanel(container, { title: '参数' })
  panel.slider({ label: '粒子数量', min: 20, max: 400, value: count, step: 10, onInput: (v) => { count = v; reset() } })
  panel.slider({ label: '速度', min: 0, max: 4, value: speed, step: 0.1, onInput: (v) => (speed = v) })
  panel.slider({ label: '色相', min: 0, max: 360, value: hue, onInput: (v) => (hue = v) })
  panel.buttons([
    { label: '运行中', active: true, onActivate: () => (paused = false) },
    { label: '暂停', onActivate: () => (paused = true) }
  ])
  // 尺寸变化时画布后备存储会自动重建；因为每帧都会重绘，这里无需额外处理。
  return cleanupAll(loop, view, panel)
}