用Canvas绘制带渐变色彩的柱状图关键是通过垂直线性渐变填充增强立体感：1. 设置canvas宽高属性并预留边距；2. 为每根柱子单独创建从顶到底的渐变对象并设色标；3. 配合阴影、顶部高光和悬停插值提升质感；4. 规范文字对齐与清晰渲染。
用 Canvas 绘制带渐变色彩的柱状图，关键不是“画出柱子”，而是让每根柱子从视觉上立起来——靠的是垂直线性渐变填充，配合合理的留白、坐标映射和颜色层次。
准备画布与基础布局
先确保 canvas 元素有明确的 width 和 height 属性（不是仅靠 CSS 设置），避免缩放失真：
- 例如：
<canvas id="chart" width="600" height="400"></canvas> - 用
getContext('2d')获取绘图上下文 - 预留边距：设
cMargin = 40，用于绘制坐标轴文字和刻度；可用绘图高度为chartHeight = canvas.height - 2 * cMargin - 把原始数据拆成年份数组和数值数组，方便后续映射与标签定位
为每根柱子创建垂直渐变色
渐变不是装饰，是增强立体感的核心。用 createLinearGradient 沿柱子高度方向定义起点（顶部）和终点（底部）：
- 假设某柱子左上角坐标为
(x, y)，高度为h，则渐变对象为：const grad = ctx.createLinearGradient(x, y, x, y + h); - 添加两个色标：
grad.addColorStop(0, '#6ad5ff'); // 顶部稍亮grad.addColorStop(1, '#2a88cc'); // 底部稍深 - 赋给
fillStyle后再调用fillRect(x, y, width, h) - 避免所有柱子用同一渐变对象——每次都要新建，否则颜色会复用错位
让渐变更自然的三个细节
单有渐变还不够，要搭配其他处理才能显“精美”：
立即学习“前端免费学习笔记（深入）”；
-
阴影轻微叠加：启用
ctx.shadowColor和ctx.shadowBlur（如8），并设shadowOffsetY = 2，模拟自然落影 -
顶部高光条：在柱子顶部加一条窄矩形（高度约 2–4px），用更浅的色值（如
rgba(255,255,255,0.4)），提升材质感 -
悬停动态插值：鼠标移入时，不直接换色，而是用
lerp函数平滑过渡到新渐变色，比如从蓝调渐变切换到紫调渐变
文字与坐标轴的清晰呈现
渐变柱子再好看，标签糊了就前功尽弃：
- x 轴标签（如年份）用
ctx.textAlign = 'center'+ctx.textBaseline = 'top'，对齐柱子中心上方 - y 轴刻度文字统一右对齐：
ctx.textAlign = 'right'，起始 x 设为cMargin - 10 - 数值标签写在柱顶上方 5px 处，字体建议
14px sans-serif，颜色比柱子主色略深（如#333） - 所有文字绘制前，记得重置
shadowColor = 'transparent'，防止模糊
