16 可视化与多媒体
  ├─ 前置：02 CSS（布局）、05 浏览器（渲染）
  ├─ 紧接：11 性能（帧率与长任务）
  ├─ 交叉：15 跨端（自绘引擎）、13 测试（视觉回归）
  └─ 长期：17 架构（图形引擎与设计系统）

/**
 * Canvas 三要素：画布尺寸、绘图上下文、坐标系（左上角原点，y 向下）。
 * 注意：CSS 尺寸与画布像素尺寸是两回事。
 */
const canvas = document.querySelector('#chart');
const ctx = canvas.getContext('2d');

// 画布像素尺寸
canvas.width = 800;
canvas.height = 400;

ctx.fillStyle = '#1677ff';
ctx.fillRect(20, 20, 120, 60); // x, y, w, h（单位：像素）

ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(20, 120);
ctx.lineTo(200, 120);
ctx.stroke();

/**
 * 物理像素 = CSS 像素 × devicePixelRatio。
 * 只设 CSS 尺寸，浏览器会拉伸位图 → 模糊。
 */
function setupHiDPI(canvas, cssWidth, cssHeight) {
  const dpr = window.devicePixelRatio || 1;

  canvas.style.width = `${cssWidth}px`;
  canvas.style.height = `${cssHeight}px`;
  canvas.width = Math.round(cssWidth * dpr);
  canvas.height = Math.round(cssHeight * dpr);

  const ctx = canvas.getContext('2d');
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // 之后按 CSS 像素坐标绘制
  return ctx;
}

<svg viewBox="0 0 400 200" role="img" aria-label="月度销售额趋势">
  <line x1="20" y1="180" x2="380" y2="180" stroke="#ccc" />
  <polyline points="20,160 100,120 180,140 260,80 340,60"
            fill="none" stroke="#1677ff" stroke-width="2" />
  <circle cx="260" cy="80" r="4" fill="#1677ff" />
</svg>

/**
 * ECharts：配置式，适合通用业务图表。
 * 注意：容器必须有宽高，否则不渲染。
 */
const chart = echarts.init(document.getElementById('chart'));

chart.setOption({
  xAxis: { type: 'category', data: ['1月', '2月', '3月'] },
  yAxis: { type: 'value' },
  series: [{ type: 'line', data: [120, 200, 150], smooth: true }],
  tooltip: { trigger: 'axis' },
});

// 容器尺寸变化必须手动 resize（或用 ResizeObserver）
const ro = new ResizeObserver(() => chart.resize());
ro.observe(document.getElementById('chart'));

<!-- 图片：明确尺寸避免 CLS；首屏图不要 lazy -->
<img src="cover.webp" width="640" height="360" alt="产品封面" fetchpriority="high" />

<!-- 视频：poster + preload 策略 -->
<video controls preload="metadata" poster="poster.webp" width="640" height="360">
  <source src="demo.mp4" type="video/mp4" />
  <track kind="captions" src="demo.zh.vtt" srclang="zh" label="中文字幕" />
</video>

/**
 * 手写一个线性比例尺：数据域 → 像素域。
 * 这是所有图表库的核心组件（D3 的 scaleLinear 就是它）。
 */
function createScale(domain, range) {
  const [d0, d1] = domain;
  const [r0, r1] = range;
  const k = (r1 - r0) / (d1 - d0);
  return (v) => r0 + (v - d0) * k;
}

const x = createScale([0, 100], [40, 760]);   // 左 40px，右 760px
const y = createScale([0, 1000], [360, 20]);  // y 轴翻转（屏幕向下为正）

console.log(x(50));  // 400
console.log(y(500)); // 190

/**
 * save/restore 成对使用：变换与样式都是「状态」，
 * 忘记 restore 会让后续绘制继承错误的坐标系。
 */
function drawBar(ctx, x, y, w, h, color) {
  ctx.save();
  ctx.translate(x, y);       // 把原点移到柱子左上角
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, w, h);  // 用局部坐标绘制
  ctx.restore();             // 恢复
}

/**
 * 所有动画共用一个 rAF 循环，避免多个循环互相抢帧。
 * 用 deltaTime 保证不同刷新率下速度一致。
 */
const tasks = new Set();
let last = performance.now();

function frame(now) {
  const dt = Math.min(now - last, 50); // 防止切后台后跳变
  last = now;

  for (const task of tasks) task(dt, now);

  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

/** 注册一个动画任务，返回取消函数。 */
function animate(update) {
  tasks.add(update);
  return () => tasks.delete(update);
}

/**
 * 矩形命中：从后往前遍历（后画的在上层）。
 * 记录每个图形的包围盒，避免 O(n) 几何计算。
 */
function hitTest(rects, px, py) {
  for (let i = rects.length - 1; i >= 0; i--) {
    const r = rects[i];
    if (px >= r.x && px <= r.x + r.w && py >= r.y && py <= r.y + r.h) return r;
  }
  return null;
}

canvas.addEventListener('pointermove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const target = hitTest(rects, x, y);
  setHover(target?.id ?? null);
});

/**
 * LTTB 抽稀：保留视觉形状的前提下把 10 万点降到 1000 点。
 * 折线图在大屏上像素宽度有限，没必要画超过像素数的点。
 */
function lttb(data, threshold) {
  if (threshold >= data.length) return data;

  const sampled = [data[0]];
  const bucketSize = (data.length - 2) / (threshold - 2);
  let a = 0;

  for (let i = 0; i < threshold - 2; i++) {
    const rangeStart = Math.floor((i + 1) * bucketSize) + 1;
    const rangeEnd = Math.min(Math.floor((i + 2) * bucketSize) + 1, data.length);

    const avgX = data.slice(rangeStart, rangeEnd).reduce((s, p) => s + p.x, 0) / (rangeEnd - rangeStart);
    const avgY = data.slice(rangeStart, rangeEnd).reduce((s, p) => s + p.y, 0) / (rangeEnd - rangeStart);

    const from = data[a];
    let maxArea = -1;
    let maxIdx = rangeStart;

    for (let j = rangeStart; j < rangeEnd; j++) {
      const area = Math.abs((from.x - avgX) * (data[j].y - from.y) - (from.x - data[j].x) * (avgY - from.y));
      if (area > maxArea) { maxArea = area; maxIdx = j; }
    }

    sampled.push(data[maxIdx]);
    a = maxIdx;
  }

  sampled.push(data[data.length - 1]);
  return sampled;
}

需要像素级定制、复杂交互 → D3（或直接 Canvas/SVG）
需要快速出标准图表 → ECharts / Recharts
需要关系图/流程图 → G6 / Cytoscape / React Flow
需要 3D/大规模点云 → Three.js / deck.gl / WebGL
需要地图 → Mapbox GL / Leaflet / 高德

/**
 * MSE：把分片的视频数据喂给 <video>，实现自适应码率与直播。
 */
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  const sb = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');
  fetchSegment(0).then((buf) => {
    sb.addEventListener('updateend', () => {
      if (mediaSource.readyState === 'open') mediaSource.endOfStream();
    });
    sb.appendBuffer(buf);
  });
});

/**
 * Web Audio：处理音频流（可视化/降噪/混音）。
 */
const audioCtx = new AudioContext();
const source = audioCtx.createMediaElementSource(video);
const analyser = audioCtx.createAnalyser();
analyser.fftSize = 256;

source.connect(analyser);
analyser.connect(audioCtx.destination);

const data = new Uint8Array(analyser.frequencyBinCount);
function draw() {
  analyser.getByteFrequencyData(data); // 频谱数据
  requestAnimationFrame(draw);
}

顶点数据（Buffer）
  → 顶点着色器（逐顶点：位置变换）
  → 图元装配（点/线/三角形）
  → 光栅化（转成像素）
  → 片元着色器（逐像素：上色）
  → 深度/混合
  → 帧缓冲（屏幕）

/**
 * 最小 WebGL：画一个三角形。
 * 关键概念：着色器、缓冲区、属性指针、绘制调用。
 */
const gl = canvas.getContext('webgl2');

const vs = `#version 300 es
in vec2 aPos;
void main() { gl_Position = vec4(aPos, 0.0, 1.0); }`;

const fs = `#version 300 es
precision mediump float;
out vec4 color;
void main() { color = vec4(0.09, 0.46, 1.0, 1.0); }`;

function compile(type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    throw new Error(gl.getShaderInfoLog(shader));
  }
  return shader;
}

const program = gl.createProgram();
gl.attachShader(program, compile(gl.VERTEX_SHADER, vs));
gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fs));
gl.linkProgram(program);
gl.useProgram(program);

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-0.5, -0.5, 0.5, -0.5, 0, 0.5]), gl.STATIC_DRAW);

const loc = gl.getAttribLocation(program, 'aPos');
gl.enableVertexAttribArray(loc);
gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);

gl.clearColor(1, 1, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

/**
 * 实例化：一次 draw 画 1 万个点。
 */
gl.vertexAttribDivisor(positionLoc, 1); // 每个实例前进一次属性
gl.drawArraysInstanced(gl.POINTS, 0, 1, 10000);

/**
 * Three.js 三件套：Scene / Camera / Renderer。
 * 场景图是树结构，变换会沿父子链累乘。
 */
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x1677ff });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

camera.position.z = 3;

function loop() {
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(loop);
}
loop();

数据层：WebSocket / SSE 推送增量
   ↓
状态层：环形缓冲（只保留窗口内数据）
   ↓
渲染层：Canvas/WebGL + 抽稀 + 分层
   ↓
交互层：缩放/筛选（改变数据窗口，不重算全部）

/**
 * WebCodecs：逐帧解码，适合视频编辑与逐帧分析。
 */
const decoder = new VideoDecoder({
  output: (frame) => { ctx.drawImage(frame, 0, 0); frame.close(); },
  error: (e) => console.error(e),
});

decoder.configure({ codec: 'avc1.42E01E', codedWidth: 1280, codedHeight: 720 });
decoder.decode(chunk); // EncodedVideoChunk

<canvas id="chart" role="img" aria-label="2026 年月度销售额：1月 120 万，2月 200 万，3月 150 万"></canvas>

<details>
  <summary>查看数据表</summary>
  <table><!-- 与图表同源数据 --></table>
</details>

需要 3D 或 >10 万图元？
├─ 是 → WebGL/WebGPU（Three.js / deck.gl / 自研）
└─ 否 → 元素需要独立交互/可访问？
         ├─ 是 → 元素数 < 1000 ? SVG/D3 : Canvas + 命中测试
         └─ 否 → Canvas（图表库优先）

/**
 * 预处理：按时间分桶 + 空间索引，避免每帧全量遍历。
 */
const buckets = new Map(); // key: 时间片，value: Float32Array 坐标

function buildBuckets(points, bucketMs = 1000) {
  for (const p of points) {
    const key = Math.floor(p.t / bucketMs);
    if (!buckets.has(key)) buckets.set(key, []);
    buckets.get(key).push(p.x, p.y);
  }
}

/**
 * 只画当前时间窗口内的点，用实例化一次提交。
 */
function renderWindow(from, to) {
  const coords = collectCoords(from, to);       // 已按窗口过滤
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, coords, gl.DYNAMIC_DRAW);
  gl.drawArrays(gl.POINTS, 0, coords.length / 2);
}

/**
 * 二维视图变换：维护缩放与平移，提供屏幕 ↔ 世界坐标互转。
 * @param {HTMLCanvasElement} canvas
 */
function createViewport(canvas) {
  let scale = 1;
  let offsetX = 0;
  let offsetY = 0;

  /** 屏幕坐标转世界坐标（含高 DPI 换算） */
  const toWorld = (clientX, clientY) => {
    const rect = canvas.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    const x = (clientX - rect.left) * dpr;
    const y = (clientY - rect.top) * dpr;
    return { x: (x - offsetX) / scale, y: (y - offsetY) / scale };
  };

  /** 应用变换：先缩放后平移 */
  const apply = (ctx) => {
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.setTransform(scale, 0, 0, scale, offsetX, offsetY);
  };

  /**
   * 命中测试：圆集合，返回最上层命中的元素。
   * @param {{x: number, y: number, r: number, id: string}[]} circles
   */
  const hitTest = (circles, clientX, clientY) => {
    const p = toWorld(clientX, clientY);
    for (let i = circles.length - 1; i >= 0; i -= 1) {
      const c = circles[i];
      const dx = p.x - c.x;
      const dy = p.y - c.y;
      if (dx * dx + dy * dy <= c.r * c.r) return c;
    }
    return null;
  };

  return {
    toWorld,
    apply,
    hitTest,
    zoomAt(factor, clientX, clientY) {
      const before = toWorld(clientX, clientY);
      scale *= factor;
      const after = toWorld(clientX, clientY);
      // 保持鼠标下的世界坐标不动
      offsetX += (after.x - before.x) * scale;
      offsetY += (after.y - before.y) * scale;
    },
  };
}

/**
 * 固定步长动画循环：逻辑按 60Hz 步进，渲染做插值。
 * @param {(dt: number) => void} update 逻辑更新，固定步长
 * @param {(alpha: number) => void} render 渲染，alpha 为插值系数
 * @param {{step?: number}} [options]
 */
function startLoop(update, render, { step = 1000 / 60 } = {}) {
  let raf = 0;
  let last = performance.now();
  let acc = 0;

  const frame = (now) => {
    // 后台标签页恢复时会有一个巨大的 delta，钳制避免「追帧」卡死
    const delta = Math.min(now - last, 100);
    last = now;
    acc += delta;

    while (acc >= step) {
      update(step / 1000);
      acc -= step;
    }
    render(acc / step);
    raf = requestAnimationFrame(frame);
  };

  raf = requestAnimationFrame(frame);
  return () => cancelAnimationFrame(raf);
}