怎么通过HTML的CSS Paint API的inputArguments声明paint函数接受的参数列表-html教程-PHP中文网

paint函数不直接接收inputarguments参数，仅固定接收ctx、geometry、properties及可选args；args是否注入及类型由registerpaint中声明的inputarguments数组（如['', '']）决定，css调用时须严格匹配顺序与数量，否则args为undefined且静默失败。

怎么通过html的css paint api的inputarguments声明paint函数接受的参数列表

paint 函数的参数怎么从 inputArguments 里来

HTML 的 CSS Paint API 中，paint 函数本身**不直接接收 CSS 自定义属性或 inputArguments 声明的参数**——它只接收固定的四个参数：ctx、geometry、properties 和可选的 args。真正起作用的是注册时传入的 inputArguments 配置，它控制浏览器在调用 paint 时是否把第 5 个参数 args 注入进去，以及这个 args 是什么类型。

注册 worklet 时必须显式声明 inputArguments

如果不写 inputArguments，paint 函数永远收不到第 5 个 args 参数（哪怕你写了也收不到）。只有在 CSS.paintWorklet.addModule() 加载的 JS 文件中，用 registerPaint 显式声明，才能启用它：

registerPaint('my-pattern', class {
  static get inputProperties() { return ['--my-color']; }
  static get inputArguments() { return ['<color>', '<number>']; } // ✅ 关键：这里声明了两个参数
  paint(ctx, geom, properties, args) { // ✅ args 现在存在且是数组
    const color = args[0]; // 类型已由 inputArguments 推导，是 CSSColorValue
    const size = args[1].value; // 类型是 CSSUnitValue，.value 取数值
  }
});</number></color>

inputArguments 是字符串数组，每个元素是 CSS 类型语法（如 '<color>'</color>、'<number>'</number>、'<length>'</length>），不是 JS 类型名
浏览器会按顺序把 CSS 函数调用里的实参解析为对应类型的 CSS Typed OM 对象，再塞进 args 数组
如果 CSS 调用时传参个数不匹配（多或少），整个 paint 调用会被跳过，且无报错提示 —— 这是最容易卡住的地方

CSS 里调用时参数必须严格匹配 inputArguments 顺序和数量

在 CSS 中使用 paint(my-pattern, red, 16) 时，括号内每个值都会被按顺序尝试解析为 inputArguments 声明的类型。不匹配就会静默失败：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

paint(my-pattern, #f00, 16px) → ❌ 第二个参数声明是 <number></number>，但 16px 是 <length></length>，args[1] 会是 undefined
paint(my-pattern, red) → ❌ 少一个参数，args 仍是 undefined（不是空数组）
paint(my-pattern, red 16) → ❌ 语法错误，整个函数无效，回退到 background 默认色

推荐始终用 console.log(args) 开头调试，确认它是不是数组、长度是否对、每个元素有没有 .value 或 .toString() 方法。

inputArguments 和 inputProperties 的分工别搞混

inputArguments 对应 CSS 函数调用时的**位置参数**（类似 JS 函数调用 f(a, b)），而 inputProperties 对应的是**CSS 自定义属性**（--x: red），两者完全独立：

inputArguments：只能在 paint(...) 括号里传，类型校验强，不可缺省
inputProperties：靠 properties.get('--my-color') 读，值是 CSSStyleValue，即使没定义也会返回 null，不会中断绘制
不能用 inputArguments 传复杂结构（比如对象或列表），每个参数只能是一个 CSS 值；需要多个值请拆成多个 <number></number> 或组合用 <custom-ident></custom-ident>