canvas绘制圆角柱状图需三步：先设置shadowcolor（必设rgba）、shadowoffsetx/y和shadowblur启用阴影；再用createlineargradient创建垂直渐变并addcolorstop定义色标；最后通过moveto/lineto/arcto手绘圆角路径并fill，避免fillrect直角。
用 Canvas 绘制带阴影、渐变和圆角的柱状图，关键在三步：先设好阴影参数并确保颜色生效，再用 createLinearGradient 做垂直渐变填充，最后通过路径绘制圆角矩形（非 fillRect），避开直角硬边。
设置阴影要显式指定颜色
Canvas 阴影不会自动开启。必须同时设置四个属性，且 shadowColor 不能为空或默认黑色（否则看不到效果）：
-
ctx.shadowColor = 'rgba(0, 0, 0, 0.2)'—— 推荐用 rgba 控制透明度，避免压暗主体 -
ctx.shadowOffsetX = 2、ctx.shadowOffsetY = 2—— 模拟自然光源从左上投来 -
ctx.shadowBlur = 6—— 值在 4–8 之间较柔和，太大易模糊边缘 - 绘制完带阴影的柱子后，如后续图形不需要阴影，记得重置：
ctx.shadowColor = ''
用线性渐变替代纯色填充
圆角柱子若只用单色，立体感弱。垂直渐变能模拟光照层次：
- 创建渐变对象：
const grad = ctx.createLinearGradient(x, y, x, y + height)（x,y 是柱子左上角） - 添加两个色标：
grad.addColorStop(0, '#5ca9ff')（顶部稍亮）、grad.addColorStop(1, '#2a78d4')（底部稍深） - 赋给填充样式：
ctx.fillStyle = grad，再执行路径填充
画圆角柱子得用路径+arcTo
Canvas 没有原生圆角矩形方法，fillRect 只能画直角。正确做法是手绘路径，用 arcTo 处理四角：
- 起点设在左上角偏移处：
ctx.moveTo(x + radius, y) - 向右画顶边：
ctx.lineTo(x + width - radius, y) - 用
arcTo画右上角：ctx.arcTo(x + width, y, x + width, y + radius, radius) - 继续画右边、底边、左下角……依次闭合
- 最后调用
ctx.fill()，渐变和阴影会自然应用到整个路径
小技巧：统一控制圆角与响应式
圆角半径不宜固定像素值，建议按柱宽比例动态计算，比如 radius = Math.min(6, barWidth * 0.15)，既防过小失真，也避免宽柱子圆角突兀。若图表需适配不同屏幕，所有坐标和尺寸都基于 canvas 的实际 width/height 属性计算，不要依赖 CSS 缩放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
