Canvas实现高性能动态柱状图排序需绕过DOM、用线性映射与requestAnimationFrame驱动：先初始化canvas并获取2D上下文，再将数据线性映射为像素坐标，基线动态计算；排序改造成步进式，每帧仅执行一步并高亮索引；清屏用clearRect，缓存样式，禁用路径绘图，按需渲染文字。
用 Canvas 实现高性能动态柱状图排序，核心在于两点：一是用像素级绘图绕过 DOM 操作开销，二是用线性映射与批量重绘控制帧率。它不依赖图表库，适合教学演示或轻量级算法可视化。
画布初始化与上下文准备
先声明 <canvas> 元素并设置真实像素尺寸（避免 CSS 缩放导致模糊）：
- HTML 中指定
width和height属性，例如width="800" height="400" - JavaScript 中用
getContext('2d')获取 2D 上下文，这是所有绘图操作的入口 - 建议将 canvas 容器设为固定宽高，禁用用户缩放，防止坐标错乱
数据到像素的精准比例换算
柱高不能直接等于数值，必须做线性映射，尤其要兼容负数和零值：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 先算出数组的
minVal和maxVal，范围range = maxVal - minVal - 设定绘图区可用高度（如
chartHeight = 350），则缩放比scale = chartHeight / range - 每个值
d对应柱高：barHeight = (d - minVal) * scale - Canvas 原点在左上角，所以绘制 y 坐标为：
y = topPadding + (chartHeight - barHeight) - 基线（y=0 对应位置）动态计算：
baselineY = topPadding + (0 - minVal) * scale，正数向上画、负数向下画
排序过程的动画驱动逻辑
动画不是靠 setInterval 硬刷，而是结合算法步骤与 requestAnimationFrame 控制节奏：
立即学习“前端免费学习笔记（深入）”；
- 把排序函数改造成“步进式”：每次只执行一次比较或交换，返回当前状态（含待高亮索引）
- 用
drawBars(arr, highlightIndices)绘制整组柱子，highlightIndices参数标记当前参与操作的下标（如快排中的 pivot、左右指针） - 调用
requestAnimationFrame循环触发重绘，每次调用前更新数组并记录步骤，避免阻塞主线程 - 可加延迟控制（如
setTimeout包裹每一步），让动画速度可调，但不要用sleep类伪同步写法
性能优化关键细节
高频重绘下，几个小改动能明显提升流畅度：
- 清屏用
ctx.clearRect(0, 0, canvas.width, canvas.height)，比 fillRect 背景色更快 - 避免在循环中重复获取字体、颜色等样式属性，提前提取并缓存
- 柱子用
fillRect绘制，别用路径+fill（path 更耗资源） - 文字标签（如数值、索引）只在必要时绘制，比如 hover 或暂停状态，减少每帧负担
- 数组规模较大时（如 >1000 元素），可采样或聚合显示，或限制最大柱宽防重叠
