canvas不识别data属性，需javascript手动读取img.dataset.watermark等值，转换类型（如parsefloat）、校验兜底后，再传入ctx.filltext等绘图函数；注意单位、弧度、颜色格式等匹配。
data- 属性本身不会自动进入 Canvas 绘图逻辑，必须由 JavaScript 主动读取、解析、再传给绘图函数——Canvas 不认 data 属性，只认你塞给 ctx 的参数。
怎么把 data-watermark 传进 canvas.drawText()
不能指望 canvas 自动识别 img.dataset.watermark。你要手动提取、校验、再作为参数传给绘制逻辑：
-
dataset是只读对象，值始终是字符串，数字类参数（如透明度、字号）需parseFloat()或parseInt()转换 - 空值或非法值要兜底：
const opacity = parseFloat(img.dataset.opacity) || 0.3 - 若多个图片共用同一套水印逻辑，建议封装成函数，避免重复写
img.dataset.xxx
data-font-size 和 canvas.font 的单位不匹配怎么办
data-font-size="24" 是纯数字，但 ctx.font 需带单位（如 "24px sans-serif"），漏写会失效：
- 直接拼接：
ctx.font = `${size}px ${family}`，其中size来自dataset.fontSize - 别用
dataset.fontSize + "px"—— 如果值为空或非数字，结果会是"NaNpx"，ctx.font将退回到浏览器默认值 - 字体族名也建议从
dataset.fontFamily读取，但要限制白名单（如只允许"sans-serif"、"monospace"），防 XSS
为什么 drawImage() 后 getComputedStyle() 拿不到 data-color
getComputedStyle() 查的是 CSS 计算样式，不是 HTML 属性；data-color 不参与样式计算，永远查不到：
- 想动态控制颜色，必须走 JS 路径：
const color = img.dataset.color || "#000"→ctx.fillStyle = color - 如果用了 CSS 变量（如
style="--watermark-color: #f00"），可用getComputedStyle(img).getPropertyValue("--watermark-color")，但这和data-无关 - 常见错误：在
img.onload外就读dataset，此时 DOM 已就绪，但属性值可能还没被 JS 修改过，要确认读取时机
data-rotate="-30" 传给 ctx.rotate() 前必须转弧度
ctx.rotate() 接收的是弧度，不是角度。直接传 -30 会旋转 -30 弧度（≈ -1719°），画面全乱：
- 正确转换：
const deg = parseFloat(img.dataset.rotate) || -30;→ctx.rotate((deg * Math.PI) / 180) - 负角度表示逆时针，Canvas 原点在左上角，旋转后文字坐标系会变，记得用
ctx.save()/ctx.restore()包裹 - 如果多个参数联动（如
data-position="center"+data-offset="20"），建议统一用对象组装后再传入绘图函数，别零散传参
最容易被忽略的点：所有 dataset 值都是字符串，而 Canvas API 对类型敏感——fillStyle 接受字符串但会静默失败（如 "0.5" 不是合法颜色），globalAlpha 必须是 0–1 数值，lineWidth 必须是正整数。不转换就传，十有八九画不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
