canvas不解析颜色字符串，动态操作颜色必须进行十六进制与rgb数值互转：前者用于渐变动画、调透明度、像素对比和主题色生成；后者用于调试显示与导出。
Canvas 本身不解析颜色字符串的内部结构，它只接受合法的颜色值字符串（如 #FF5733、rgb(255,87,51)）或已计算好的数值。但当你需要**动态读取、修改、混合或调试颜色**时，就必须把十六进制字符串拆解为 R/G/B 数值，或把计算结果再转回字符串——这正是“十六进制字符串与数值互转”的核心用途。
为什么 Canvas 场景下必须做这层转换
Canvas 的 fillStyle 或 strokeStyle 虽然支持直接赋值 '#4A90E2'，但以下情况无法绕过数值解析：
- 实现颜色渐变动画：需在每帧中对 R、G、B 分别做线性插值，字符串无法直接运算
- 调整透明度：十六进制不带 alpha，必须先转成 RGB，再构造
rgba(r,g,b,a) - 从图像中读取像素：
getImageData()返回的是[r,g,b,a]数组（0–255），要对比或映射到设计稿色值，就得转成#RRGGBB格式显示 - 主题色实时预览：用户选了
#F53，你要快速生成深色/浅色变体，本质是数值缩放
十六进制字符串 → 数值（用于 Canvas 计算）
关键点在于正确处理两种格式：#RRGGBB 和简写 #RGB。可借助正则提取并统一转为十进制：
- 匹配六位：用
/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i提取三组两位十六进制 - 匹配三位：用
/^#?([a-f\d])([a-f\d])([a-f\d])$/i，再将每位重复一次（如F→FF） - 用
parseInt(str, 16)转为 0–255 的整数，得到{ r, g, b }对象
例如：#F53 → 提取 F、5、3 → 扩展为 FF、55、33 → 得到 r=255, g=85, b=51。
数值 → 十六进制字符串（用于 Canvas 显示或导出）
Canvas 不要求你输出十六进制，但团队协作、调试面板、色值复制功能都需要它。转换逻辑清晰：
- 确保每个通道值在 0–255 范围内，越界则截断
- 用
.toString(16).padStart(2, '0')转为小写两位十六进制（如13→'0d'） - 拼接并加
#前缀，如#ff5733 - 若三通道两两相等（如
r===g && g===b），可进一步压缩为三位格式（#f53），非必需但更简洁
一个实用的 Canvas 颜色工具函数示例
下面这个函数能双向转换，且自动兼容简写和标准格式，适合嵌入 Canvas 工具链：
function hexToRgb(hex) {
hex = hex.replace(/^#/, '');
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}
const r = parseInt(hex.slice(0, 2), 16);
const g = parseInt(hex.slice(2, 4), 16);
const b = parseInt(hex.slice(4, 6), 16);
return { r, g, b };
}
function rgbToHex(r, g, b) {
r = Math.max(0, Math.min(255, Math.round(r)));
g = Math.max(0, Math.min(255, Math.round(g)));
b = Math.max(0, Math.min(255, Math.round(b)));
return '#' + [r,g,b].map(x => x.toString(16).padStart(2,'0')).join('');
}
调用 hexToRgb('#4A90E2') 得到 {r:74,g:144,b:226}，后续所有 Canvas 动画、混合、亮度调节都基于此对象进行。
