{"id":13199,"date":"2026-03-17T06:28:54","date_gmt":"2026-03-17T06:28:54","guid":{"rendered":"https:\/\/withcode.tech\/media\/?p=13199"},"modified":"2026-07-02T07:53:20","modified_gmt":"2026-07-02T07:53:20","slug":"css-painting-api-guide","status":"publish","type":"post","link":"https:\/\/withcode.tech\/media\/css-painting-api-guide\/","title":{"rendered":"CSS Painting API\u5b8c\u5168\u30ac\u30a4\u30c9\uff5cHoudini PaintWorklet\u30fb\u30ab\u30b9\u30bf\u30e0\u80cc\u666f\u30fbCSS @property\u30fb\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u30fbSVG\u6bd4\u8f03\u30fbVite\u30d0\u30f3\u30c9\u30eb\u307e\u3067\u5fb9\u5e95\u89e3\u8aac"},"content":{"rendered":"\n
\n

\u3053\u306e\u8a18\u4e8b\u3067\u308f\u304b\u308b\u3053\u3068<\/h2>\n
    \n
  • CSS Houdini\u306e\u5168\u4f53\u50cf\u3068CSS Painting API\u306e\u4f4d\u7f6e\u3065\u3051\u30fb\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9<\/li>\n
  • PaintWorklet\u306e\u5b9a\u7fa9\u30fb\u767b\u9332\u30fbCSS\u304b\u3089\u306e\u547c\u3073\u51fa\u3057\u624b\u9806\uff08Hello World\uff09<\/li>\n
  • \u30c9\u30c3\u30c8\uff0f\u6ce2\u7dda\uff0f\u30b0\u30ea\u30c3\u30c9\uff0f\u30ce\u30a4\u30ba\uff0f\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc\u306a\u3069\u5b9f\u8df5\u30d1\u30bf\u30fc\u30f3\u5b9f\u88c5<\/li>\n
  • CSS @property\u3068\u7d44\u307f\u5408\u308f\u305b\u305ftransition\uff0fanimation\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u9023\u643a<\/li>\n
  • Vite\u3067\u306e\u30d0\u30f3\u30c9\u30eb\u65b9\u6cd5\u30fb\u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8\u30fbSVG\u3068\u306e\u4f7f\u3044\u5206\u3051\u57fa\u6e96<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n
    \"\"\u751f\u5f92<\/span><\/div>
    \n

    CSS\u3060\u3051\u3067\u306f\u8868\u73fe\u3067\u304d\u306a\u3044\u8907\u96d1\u306a\u80cc\u666f\u30d1\u30bf\u30fc\u30f3\u3092\u5b9f\u88c5\u3057\u305f\u3044\u3093\u3067\u3059\u304c\u3001\u753b\u50cf\u3092\u4f7f\u3046\u3068\u91cd\u3044\u3057\u2026\u2026\u30ab\u30b9\u30bf\u30e0\u63cf\u753b\u304c\u3067\u304d\u308bAPI\u304c\u3042\u308b\u3093\u3067\u3059\u304b\uff1f<\/strong><\/p>\n <\/span><\/span><\/span><\/div><\/div><\/div><\/div>\n\n

    \"\"\u30da\u30f3\u535a\u58eb<\/span><\/div>
    \n

    CSS Painting API\u304c\u307e\u3055\u306b\u305d\u308c\u3058\u3083\uff01CSS\u306eHoudini\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4e00\u90e8\u3067\u3001PaintWorklet\u3068\u3044\u3046JavaScript\u306e\u30af\u30e9\u30b9\u3092\u4f7f\u3063\u3066\u4efb\u610f\u306e\u63cf\u753b\u51e6\u7406\u3092CSS\u5185\u3067\u547c\u3073\u51fa\u305b\u308b\u305e\u3002\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u4e0d\u8981\u3067\u3001CSS\u5909\u6570\u3067\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3082\u52d5\u7684\u306b\u5909\u3048\u3089\u308c\u308b\u304b\u3089\u975e\u5e38\u306b\u5f37\u529b\u3058\u3083\uff01\u3055\u3089\u306b@property\u3068\u7d44\u307f\u5408\u308f\u305b\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3082\u5b9f\u88c5\u3067\u304d\u308b\uff01<\/strong><\/p>\n <\/span><\/span><\/span><\/div><\/div><\/div><\/div>\n\n\n

    \u7d50\u8ad6\uff1aCSS Painting API\uff08CSS Houdini\uff09\u306fPaintWorklet\u3092JavaScript\u3067\u5b9a\u7fa9\u3057\u3001background-image\u306bpaint()\u3067\u547c\u3073\u51fa\u3059\u3053\u3068\u3067\u3001\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u4e0d\u8981\u306e\u30ab\u30b9\u30bf\u30e0\u80cc\u666f\u30d1\u30bf\u30fc\u30f3\u3092\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/strong>CSS\u5909\u6570\u3067\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092CSS\u304b\u3089\u52d5\u7684\u306b\u5236\u5fa1\u3067\u304d\u3001@property\u3068\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n

    \u672c\u8a18\u4e8b\u3067\u306f\u3001CSS Painting API\u306e\u6982\u8981\u30fbCSS Houdini\u306e\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u30fbPaintWorklet\u306e\u767b\u9332\u65b9\u6cd5\u30fbinputProperties\/inputArguments\u30fb\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u306e\u9023\u643a\u30fb\u30c9\u30c3\u30c8\/\u6ce2\u7dda\/\u30c1\u30a7\u30c3\u30ab\u30fc\/\u30e1\u30c3\u30b7\u30e5\/\u30ce\u30a4\u30ba\u80cc\u666f\u306e\u5b9f\u88c5\u30fbCSS @property\u3068\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u9023\u643a\u30fbVite\u3067\u306e\u30d0\u30f3\u30c9\u30eb\u65b9\u6cd5\u30fbSVG\u3068\u306e\u4f7f\u3044\u5206\u3051\u30fbcss-paint-polyfill\u306b\u3088\u308b\u4e92\u63db\u5bfe\u5fdc\u30fb\u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8\u72b6\u6cc1<\/span><\/strong>\u3092\u5b8c\u5168\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

    \n\n\n\n

    CSS Houdini\u3068\u306f\uff5cCSS\u3092\u62e1\u5f35\u3059\u308b\u4f4e\u30ec\u30d9\u30ebAPI\u7fa4<\/h2>\n\n\n\n

    CSS Houdini\u306f\u3001\u958b\u767a\u8005\u304c\u30d6\u30e9\u30a6\u30b6\u306eCSS\u30a8\u30f3\u30b8\u30f3\u306b\u76f4\u63a5\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3081\u306e\u4f4e\u30ec\u30d9\u30ebAPI\u30bb\u30c3\u30c8\u3067\u3059\u3002\u5f93\u6765\u306f\u30d6\u30e9\u30a6\u30b6\u5074\u3060\u3051\u304c\u5b9f\u88c5\u3067\u304d\u305fCSS\u306e\u6a5f\u80fd\u3092\u3001JavaScript\u3092\u4f7f\u3063\u3066\u958b\u767a\u8005\u304c\u72ec\u81ea\u306b\u5b9f\u88c5\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n 

    >\u3010CSS Houdini\u306e\u4e3b\u306aAPI\u3011\n\n1. CSS Painting API\uff08\u672c\u8a18\u4e8b\u306e\u30e1\u30a4\u30f3\uff09\n   \u2192 background-image, border-image\u7b49\u306b\u30ab\u30b9\u30bf\u30e0\u63cf\u753b\u3092\u9069\u7528\n   \u2192 PaintWorklet\u3067\u4efb\u610f\u306eCanvas\u63cf\u753b\u3092\u5b9a\u7fa9\n   \u2192 \u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8\uff1aChrome\/Edge \u2705 \/ Firefox \u26a0\ufe0f \/ Safari \u274c\n\n2. CSS Properties and Values API\uff08@property\uff09\n   \u2192 CSS\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u578b\u30fb\u521d\u671f\u5024\u30fb\u7d99\u627f\u3092\u5b9a\u7fa9\n   \u2192 \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5bfe\u5fdc\uff08transition\/animation \u304c\u52b9\u304f\u3088\u3046\u306b\u306a\u308b\uff09\n   \u2192 \u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8\uff1aChrome\/Edge\/Safari \u2705 \/ Firefox \u2705\uff082023+\uff09\n\n3. CSS Layout API\n   \u2192 display \u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u30ab\u30b9\u30bf\u30e0\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u5b9f\u88c5\n   \u2192 Masonry \u30ec\u30a4\u30a2\u30a6\u30c8\u306a\u3069\u3092\u81ea\u524d\u3067\u5b9f\u88c5\u53ef\u80fd\n   \u2192 \u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8\uff1aChrome \u26a0\ufe0f\uff08\u5b9f\u9a13\u7684\uff09\n\n4. CSS Animation Worklet API\n   \u2192 \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u304b\u3089\u5207\u308a\u96e2\u3057\u3066\u6ed1\u3089\u304b\u5316\n   \u2192 \u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8\uff1aChrome \u26a0\ufe0f\uff08\u5b9f\u9a13\u7684\uff09\n\n5. CSS Parser API\n   \u2192 CSS\u30d1\u30fc\u30b9\u7d50\u679c\u3078\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u30a2\u30af\u30bb\u30b9\n   \u2192 \u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8\uff1a\u691c\u8a0e\u4e2d\n\n\u3010Worklet\u3068\u306f\u3011\n\u2192 Service Worker\u3084Web Worker\u3068\u540c\u69d8\u306e\u5206\u96e2\u3055\u308c\u305f\u5b9f\u884c\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\n\u2192 \u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3068\u306f\u5225\u306e\u30b9\u30ec\u30c3\u30c9\u3067\u52d5\u4f5c\n\u2192 DOM \u3078\u306e\u30a2\u30af\u30bb\u30b9\u306f\u3067\u304d\u306a\u3044\uff08\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u306e\u305f\u3081\uff09\n\u2192 \u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u306f\u5171\u6709\u3057\u306a\u3044<\/code><\/pre><\/div>\n\n
    \n  
    \"CSS<\/figure>\n<\/div>\n\n\n
    \n\n\n\n
    CSS Painting API\u3068\u306f\uff5cCSS\u304b\u3089\u547c\u3073\u51fa\u305b\u308b\u30ab\u30b9\u30bf\u30e0\u63cf\u753b\u30a8\u30f3\u30b8\u30f3<\/h2>\n\n\n  
    >\u3010CSS Painting API\u306e\u4ed5\u7d44\u307f\u3011\n\n\u901a\u5e38\u306eCSS\uff08\u753b\u50cf\u3092\u4f7f\u3046\u5834\u5408\uff09\uff1a\nbackground-image: url('pattern.png')\n\u2192 \u5916\u90e8\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u304c\u5fc5\u8981\u3002\u89e3\u50cf\u5ea6\u304c\u56fa\u5b9a\u3002\n\u2192 \u5c0f\u3055\u3044\u30b5\u30a4\u30ba\u3067\u306fpixel\u304c\u8352\u304f\u306a\u308b\u3002\n\u2192 CSS\u3067\u52d5\u7684\u306b\u5909\u66f4\u4e0d\u53ef\u3002\n\nCSS Painting API\uff08\u30ab\u30b9\u30bf\u30e0\u63cf\u753b\uff09\uff1a\nbackground-image: paint(myPattern)\n\u2192 JavaScript\u306ePaintWorklet\u3067\u4efb\u610f\u306e\u63cf\u753b\u3092\u5b9f\u884c\n\u2192 \u30d5\u30a1\u30a4\u30eb\u4e0d\u8981\u30fb\u30b5\u30a4\u30ba\u306b\u5fdc\u3058\u305f\u52d5\u7684\u63cf\u753b\uff08\u30d9\u30af\u30bf\u30fc\u7684\uff09\n\u2192 CSS\u5909\u6570\u3067\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092CSS\u304b\u3089\u6e21\u305b\u308b\n\u2192 CSS transition\/animation\u306e\u5024\u5909\u5316\u306b\u5408\u308f\u305b\u3066\u518d\u63cf\u753b\n\n\u3010Canvas API\u3068\u306e\u9055\u3044\u3011\nCanvas API\uff08\u901a\u5e38\uff09\uff1a\n\u2192 <canvas> \u8981\u7d20\u306b\u63cf\u753b\uff08DOM\u8981\u7d20\uff09\n\u2192 \u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9\u3067\u5b9f\u884c\n\u2192 CSS \u3067\u4f4d\u7f6e\u30fb\u30b5\u30a4\u30ba\u3092\u5236\u5fa1\n\nCSS Painting API\uff1a\n\u2192 CSS\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5024\u3068\u3057\u3066\u63cf\u753b\uff08DOM\u8981\u7d20\u3067\u306f\u306a\u3044\uff09\n\u2192 \u30ef\u30fc\u30af\u30ec\u30c3\u30c8\u30b9\u30ec\u30c3\u30c9\u3067\u5b9f\u884c\uff08\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u826f\u597d\uff09\n\u2192 \u8981\u7d20\u306e\u30b5\u30a4\u30ba\u5909\u66f4\u306b\u81ea\u52d5\u8ffd\u5f93\uff08\u30ea\u30b5\u30a4\u30ba\u5bfe\u5fdc\uff09\n\n\u3010\u30e6\u30fc\u30b9\u30b1\u30fc\u30b9\u4e00\u89a7\u3011\n\u2705 \u30ab\u30b9\u30bf\u30e0\u80cc\u666f\u30d1\u30bf\u30fc\u30f3\uff08\u30c9\u30c3\u30c8\u30fb\u6ce2\u30fb\u30e1\u30c3\u30b7\u30e5\u30fb\u30cf\u30c3\u30c1\u30f3\u30b0\u30fb\u30ce\u30a4\u30ba\uff09\n\u2705 \u30ab\u30b9\u30bf\u30e0\u30dc\u30fc\u30c0\u30fc\u30fb\u30a2\u30a6\u30c8\u30e9\u30a4\u30f3\uff08\u6ce2\u7dda\u30fb\u7834\u7dda\u30fb\u30b8\u30b0\u30b6\u30b0\uff09\n\u2705 \u52d5\u7684\u306a\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\uff08\u30c7\u30fc\u30bf\u306b\u57fa\u3065\u3044\u305f\u52d5\u7684\u306a\u914d\u8272\uff09\n\u2705 \u30c7\u30fc\u30bf\u30d3\u30b8\u30e5\u30a2\u30e9\u30a4\u30bc\u30fc\u30b7\u30e7\u30f3\uff08\u7c21\u6613\u7684\u306a\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc\u30fb\u30df\u30cb\u30c1\u30e3\u30fc\u30c8\uff09\n\u2705 \u30ab\u30b9\u30bf\u30e0\u30cf\u30a4\u30e9\u30a4\u30c8\u30fb\u30c6\u30ad\u30b9\u30c8\u88c5\u98fe<\/code><\/pre><\/div>\n\n\n
    \n\n\n\n
    \u57fa\u672c\u7684\u306a\u4f7f\u3044\u65b9\uff5cHello World \u7684\u306a\u5b9f\u88c5<\/h2>\n\n\n\n
    \u30b9\u30c6\u30c3\u30d71\uff1aPaintWorklet\u3092\u5b9a\u7fa9\u3059\u308b\uff08worklet.js\uff09<\/h3>\n\n\n  
    >\/\/ paint-worklet.js\n\/\/ \u203b \u3053\u306e\u30d5\u30a1\u30a4\u30eb\u306f\u30b0\u30ed\u30fc\u30d0\u30eb\u30b9\u30b3\u30fc\u30d7\u304c\u901a\u5e38\u306eJS\u3068\u7570\u306a\u308b\n\/\/    - document, window \u306f\u30a2\u30af\u30bb\u30b9\u4e0d\u53ef\n\/\/    - registerPaint() \u3067Worklet\u3092\u767b\u9332\n\nclass CheckerboardPainter {\n  \/\/ CSS\u304b\u3089\u6e21\u305b\u308b\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5b9a\u7fa9\uff08inputProperties\u306b\u6307\u5b9a\uff09\n  static get inputProperties() {\n    return ['--checkerboard-size', '--checkerboard-color']\n  }\n\n  \/\/ paint() \u304c\u5b9f\u969b\u306e\u63cf\u753b\u51e6\u7406\n  \/\/ ctx: PaintRenderingContext2D\uff08Canvas2D\u4e92\u63db\uff09\n  \/\/ geometry: \u63cf\u753b\u9818\u57df\u306e\u30b5\u30a4\u30ba\uff08geometry.width, geometry.height\uff09\n  \/\/ properties: inputProperties\u3067\u6307\u5b9a\u3057\u305fCSS\u5909\u6570\u306e\u5024\n  paint(ctx, geometry, properties) {\n    \/\/ CSS\u5909\u6570\u3092\u53d6\u5f97\n    const rawSize = properties.get('--checkerboard-size')\n    const size = rawSize ? parseInt(rawSize.toString()) : 20\n    const rawColor = properties.get('--checkerboard-color')\n    const color = rawColor ? rawColor.toString().trim() : '#cccccc'\n\n    const cols = Math.ceil(geometry.width \/ size) + 1\n    const rows = Math.ceil(geometry.height \/ size) + 1\n\n    \/\/ \u5e02\u677e\u6a21\u69d8\uff1a\u884c\u5217\u306e\u5408\u8a08\u304c\u5076\u6570\u306e\u30bb\u30eb\u3092\u5857\u308b\n    for (let row = 0; row <= rows; row++) {\n      for (let col = 0; col <= cols; col++) {\n        if ((row + col) % 2 === 0) {\n          ctx.fillStyle = color\n          ctx.fillRect(col * size, row * size, size, size)\n        }\n      }\n    }\n  }\n}\n\n\/\/ \u30ef\u30fc\u30af\u30ec\u30c3\u30c8\u306b\u540d\u524d\u3092\u4ed8\u3051\u3066\u767b\u9332\uff08paint()\u304b\u3089\u547c\u3073\u51fa\u3059\u3068\u304d\u306e\u540d\u524d\uff09\nregisterPaint('checkerboard', CheckerboardPainter)<\/code><\/pre><\/div>\n\n\n
    \u30b9\u30c6\u30c3\u30d72\uff1aHTML\u304b\u3089Worklet\u3092\u8aad\u307f\u8fbc\u3080<\/h3>\n\n\n  
    ><!-- index.html -->\n<script>\n  \/\/ CSS Painting API\u306e\u30b5\u30dd\u30fc\u30c8\u78ba\u8a8d\n  if ('paintWorklet' in CSS) {\n    \/\/ PaintWorklet\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u975e\u540c\u671f\u3067\u8aad\u307f\u8fbc\u3080\n    CSS.paintWorklet.addModule('.\/paint-worklet.js')\n      .then(() => console.log('PaintWorklet loaded'))\n      .catch(err => console.error('Failed to load worklet:', err))\n  } else {\n    console.warn('CSS Painting API is not supported in this browser')\n    \/\/ Polyfill\u3092\u8aad\u307f\u8fbc\u3080\uff08\u5f8c\u8ff0\uff09\n  }\n<\/script><\/code><\/pre><\/div>\n\n\n
    \u30b9\u30c6\u30c3\u30d73\uff1aCSS\u304b\u3089paint()\u3092\u547c\u3073\u51fa\u3059<\/h3>\n\n\n  
    >\/* style.css *\/\n\n.checkerboard-bg {\n  \/* CSS\u5909\u6570\u3067\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u6e21\u3059 *\/\n  --checkerboard-size: 30;\n  --checkerboard-color: #3B82F620;  \/* \u534a\u900f\u660e\u306e\u9752 *\/\n\n  \/* paint() \u3067Worklet\u3092\u547c\u3073\u51fa\u3059\uff08registerPaint\u306e\u540d\u524d\u3068\u4e00\u81f4\uff09 *\/\n  background-image: paint(checkerboard);\n  background-color: #ffffff;  \/* \u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\uff08\u672a\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\u7528\uff09 *\/\n\n  width: 100%;\n  height: 300px;\n  border-radius: 8px;\n}\n\n\/* \u30db\u30d0\u30fc\u3067\u8272\u3092\u5909\u3048\u308b\uff08CSS\u5909\u6570\u306e\u5909\u66f4\u3067\u81ea\u52d5\u7684\u306bpaint\u304c\u518d\u5b9f\u884c\u3055\u308c\u308b\uff01\uff09 *\/\n.checkerboard-bg:hover {\n  --checkerboard-color: #EF444420;\n  --checkerboard-size: 15;\n  transition: none;  \/* CSS\u5909\u6570\u306ftransition\u3067\u304d\u306a\u3044\uff08\u5f8c\u8ff0\u306e@property\u3067\u89e3\u6c7a\uff09*\/\n}<\/code><\/pre><\/div>\n\n\n
    \n\n\n\n
    \u5b9f\u8df5\u30d1\u30bf\u30fc\u30f3\u96c6\uff5c\u3088\u304f\u4f7f\u308f\u308c\u308b\u80cc\u666f\u30d1\u30bf\u30fc\u30f3\u306e\u5b9f\u88c5<\/h2>\n\n\n\n
    \u30d1\u30bf\u30fc\u30f31\uff1a\u30c9\u30c3\u30c8\u80cc\u666f<\/h3>\n\n\n  
    >\/\/ dot-pattern-worklet.js\n\nclass DotPatternPainter {\n  static get inputProperties() {\n    return ['--dot-size', '--dot-color', '--dot-gap', '--dot-opacity']\n  }\n\n  paint(ctx, geometry, properties) {\n    const size = parseFloat(properties.get('--dot-size')) || 4\n    const color = properties.get('--dot-color').toString().trim() || '#94A3B8'\n    const gap = parseFloat(properties.get('--dot-gap')) || 20\n    const opacity = parseFloat(properties.get('--dot-opacity')) || 1\n\n    ctx.globalAlpha = Math.max(0, Math.min(1, opacity))\n\n    for (let y = gap \/ 2; y < geometry.height; y += gap) {\n      for (let x = gap \/ 2; x < geometry.width; x += gap) {\n        ctx.beginPath()\n        ctx.arc(x, y, size \/ 2, 0, 2 * Math.PI)\n        ctx.fillStyle = color\n        ctx.fill()\n      }\n    }\n  }\n}\n\nregisterPaint('dot-pattern', DotPatternPainter)\n\n\/* CSS \u3067\u306e\u4f7f\u3044\u65b9 *\/\n\/*\n.hero-section {\n  --dot-size: 3;\n  --dot-color: #6366F1;\n  --dot-gap: 24;\n  --dot-opacity: 0.4;\n  background-color: #0f0f23;\n  background-image: paint(dot-pattern);\n}\n*\/<\/code><\/pre><\/div>\n\n\n
    \u30d1\u30bf\u30fc\u30f32\uff1a\u6ce2\u7dda\u30dc\u30fc\u30c0\u30fc<\/h3>\n\n\n  
    >\/\/ wavy-border-worklet.js\n\nclass WavyBorderPainter {\n  static get inputProperties() {\n    return [\n      '--wave-amplitude',\n      '--wave-frequency',\n      '--border-color',\n      '--border-width',\n      '--wave-phase',  \/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u7528\u306e\u4f4d\u76f8\n    ]\n  }\n\n  paint(ctx, geometry, properties) {\n    const amplitude = parseFloat(properties.get('--wave-amplitude')) || 5\n    const frequency = parseFloat(properties.get('--wave-frequency')) || 0.05\n    const color = properties.get('--border-color').toString().trim() || '#3B82F6'\n    const lineWidth = parseFloat(properties.get('--border-width')) || 2\n    const phase = parseFloat(properties.get('--wave-phase')) || 0\n\n    const drawWavyLine = (y) => {\n      ctx.beginPath()\n      ctx.moveTo(0, y)\n      for (let x = 0; x <= geometry.width; x++) {\n        const waveY = y + Math.sin((x * frequency) + phase) * amplitude\n        ctx.lineTo(x, waveY)\n      }\n      ctx.strokeStyle = color\n      ctx.lineWidth = lineWidth\n      ctx.stroke()\n    }\n\n    \/\/ \u4e0a\u8fba\u306b\u6ce2\u7dda\u30dc\u30fc\u30c0\u30fc\u3092\u63cf\u304f\n    drawWavyLine(amplitude + lineWidth)\n    \/\/ \u4e0b\u8fba\u306b\u6ce2\u7dda\u30dc\u30fc\u30c0\u30fc\u3092\u63cf\u304f\n    drawWavyLine(geometry.height - amplitude - lineWidth)\n  }\n}\n\nregisterPaint('wavy-border', WavyBorderPainter)<\/code><\/pre><\/div>\n\n\n
    \u30d1\u30bf\u30fc\u30f33\uff1a\u30b0\u30ea\u30c3\u30c9\u80cc\u666f\uff08\u5efa\u7bc9\u8a2d\u8a08\u30c9\u30e9\u30d5\u30c8\u98a8\uff09<\/h3>\n\n\n  
    >\/\/ grid-pattern-worklet.js\n\nclass GridPatternPainter {\n  static get inputProperties() {\n    return [\n      '--grid-size',\n      '--grid-color',\n      '--grid-major-every',  \/\/ \u4f55\u30b0\u30ea\u30c3\u30c9\u3054\u3068\u306b\u592a\u7dda\u3092\u5f15\u304f\u304b\n      '--grid-major-color',\n    ]\n  }\n\n  paint(ctx, geometry, properties) {\n    const gridSize = parseFloat(properties.get('--grid-size')) || 16\n    const gridColor = properties.get('--grid-color').toString().trim() || '#e2e8f0'\n    const majorEvery = parseInt(properties.get('--grid-major-every')) || 4\n    const majorColor = properties.get('--grid-major-color').toString().trim() || '#cbd5e1'\n\n    \/\/ \u7e26\u7dda\u3092\u63cf\u304f\n    for (let x = 0; x <= geometry.width; x += gridSize) {\n      const isMajor = (x \/ gridSize) % majorEvery === 0\n      ctx.beginPath()\n      ctx.moveTo(x, 0)\n      ctx.lineTo(x, geometry.height)\n      ctx.strokeStyle = isMajor ? majorColor : gridColor\n      ctx.lineWidth = isMajor ? 1.5 : 0.5\n      ctx.stroke()\n    }\n\n    \/\/ \u6a2a\u7dda\u3092\u63cf\u304f\n    for (let y = 0; y <= geometry.height; y += gridSize) {\n      const isMajor = (y \/ gridSize) % majorEvery === 0\n      ctx.beginPath()\n      ctx.moveTo(0, y)\n      ctx.lineTo(geometry.width, y)\n      ctx.strokeStyle = isMajor ? majorColor : gridColor\n      ctx.lineWidth = isMajor ? 1.5 : 0.5\n      ctx.stroke()\n    }\n  }\n}\n\nregisterPaint('grid-pattern', GridPatternPainter)<\/code><\/pre><\/div>\n\n\n
    \u30d1\u30bf\u30fc\u30f34\uff1a\u30ce\u30a4\u30ba\u30fb\u30c6\u30af\u30b9\u30c1\u30e3\u80cc\u666f<\/h3>\n\n\n  
    >\/\/ noise-texture-worklet.js\n\/\/ \u30b7\u30f3\u30d7\u30eb\u306aValue Noise\u3092\u5b9f\u88c5\uff08Perlin\u30ce\u30a4\u30ba\u306e\u7c21\u6613\u7248\uff09\n\nclass NoiseTexturePainter {\n  static get inputProperties() {\n    return ['--noise-scale', '--noise-color', '--noise-opacity', '--noise-seed']\n  }\n\n  \/\/ \u30b7\u30f3\u30d7\u30eb\u306a\u7591\u4f3c\u30e9\u30f3\u30c0\u30e0\u95a2\u6570\uff08\u30b7\u30fc\u30c9\u5024\u3067\u518d\u73fe\u6027\u3042\u308a\uff09\n  random(x, y, seed) {\n    const n = Math.sin(x * 127.1 + y * 311.7 + seed * 74.3) * 43758.5453\n    return n - Math.floor(n)\n  }\n\n  \/\/ \u30d0\u30a4\u30ea\u30cb\u30a2\u88dc\u9593\n  smoothNoise(x, y, seed) {\n    const ix = Math.floor(x)\n    const iy = Math.floor(y)\n    const fx = x - ix\n    const fy = y - iy\n    const ux = fx * fx * (3 - 2 * fx)  \/\/ Hermite smoothstep\n    const uy = fy * fy * (3 - 2 * fy)\n\n    const a = this.random(ix, iy, seed)\n    const b = this.random(ix + 1, iy, seed)\n    const c = this.random(ix, iy + 1, seed)\n    const d = this.random(ix + 1, iy + 1, seed)\n\n    return a + (b - a) * ux + (c - a) * uy + (d - a + b + c - a - b - c) * ux * uy\n  }\n\n  paint(ctx, geometry, properties) {\n    const scale = parseFloat(properties.get('--noise-scale')) || 4\n    const colorStr = properties.get('--noise-color').toString().trim() || '0,0,0'\n    const opacity = parseFloat(properties.get('--noise-opacity')) || 0.15\n    const seed = parseFloat(properties.get('--noise-seed')) || 42\n\n    \/\/ \u30d4\u30af\u30bb\u30eb\u30d0\u30c3\u30d5\u30a1\u3092\u76f4\u63a5\u64cd\u4f5c\uff08\u9ad8\u901f\uff09\n    const imageData = ctx.createImageData(geometry.width, geometry.height)\n    const data = imageData.data\n\n    const [r, g, b] = colorStr.split(',').map(v => parseInt(v.trim()))\n\n    for (let y = 0; y < geometry.height; y++) {\n      for (let x = 0; x < geometry.width; x++) {\n        const noiseValue = this.smoothNoise(x \/ scale, y \/ scale, seed)\n        const alpha = Math.floor(noiseValue * 255 * opacity)\n\n        const idx = (y * geometry.width + x) * 4\n        data[idx] = r ?? 128\n        data[idx + 1] = g ?? 128\n        data[idx + 2] = b ?? 128\n        data[idx + 3] = alpha\n      }\n    }\n\n    ctx.putImageData(imageData, 0, 0)\n  }\n}\n\nregisterPaint('noise-texture', NoiseTexturePainter)<\/code><\/pre><\/div>\n\n\n
    \u30d1\u30bf\u30fc\u30f35\uff1a\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc<\/h3>\n\n\n  
    >\/\/ progress-bar-worklet.js\n\/\/ CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u30d7\u30ed\u30b0\u30ec\u30b9\u3092\u52d5\u304b\u305b\u308b\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc\n\nclass ProgressBarPainter {\n  static get inputProperties() {\n    return [\n      '--progress',       \/\/ 0\u301c1\u306e\u5024\n      '--bar-color',\n      '--track-color',\n      '--bar-radius',\n      '--show-gradient',  \/\/ \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u3046\u304b\n    ]\n  }\n\n  paint(ctx, geometry, properties) {\n    const progress = Math.max(0, Math.min(1,\n      parseFloat(properties.get('--progress')) || 0\n    ))\n    const barColor = properties.get('--bar-color').toString().trim() || '#3B82F6'\n    const trackColor = properties.get('--track-color').toString().trim() || '#E2E8F0'\n    const barRadius = parseFloat(properties.get('--bar-radius')) || geometry.height \/ 2\n    const showGradient = properties.get('--show-gradient').toString().trim() === '1'\n\n    const { width, height } = geometry\n\n    \/\/ \u30c8\u30e9\u30c3\u30af\uff08\u80cc\u666f\uff09\u3092\u63cf\u753b\n    ctx.beginPath()\n    ctx.roundRect(0, 0, width, height, barRadius)\n    ctx.fillStyle = trackColor\n    ctx.fill()\n\n    \/\/ \u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc\u3092\u63cf\u753b\n    const barWidth = width * progress\n    if (barWidth > 0) {\n      ctx.beginPath()\n      ctx.roundRect(0, 0, barWidth, height, barRadius)\n\n      if (showGradient && barWidth > 0) {\n        const gradient = ctx.createLinearGradient(0, 0, barWidth, 0)\n        gradient.addColorStop(0, barColor + '99')\n        gradient.addColorStop(1, barColor)\n        ctx.fillStyle = gradient\n      } else {\n        ctx.fillStyle = barColor\n      }\n      ctx.fill()\n    }\n  }\n}\n\nregisterPaint('progress-bar', ProgressBarPainter)<\/code><\/pre><\/div>\n\n\n
    \n\n\n\n
    CSS @property \u3068\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u9023\u643a<\/h2>\n\n\n\n
    CSS\u5909\u6570\uff08--my-value<\/code>\uff09\u306f\u901a\u5e38\u3001transition<\/code>\u3084animation<\/code>\u306b\u3088\u308b\u30c8\u30a5\u30a4\u30fc\u30f3\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u305b\u3093\u3002CSS @property\uff08CSS Houdini Properties and Values API\uff09\u3092\u4f7f\u3063\u3066\u578b\u3092\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u3067\u3001CSS\u5909\u6570\u3082\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u53ef\u80fd<\/strong>\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n  
    >\/* CSS @property \u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u53ef\u80fd\u306a\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5b9a\u7fa9 *\/\n\n@property --progress {\n  syntax: '<number>';        \/* \u6570\u5024\u578b\u3068\u3057\u3066\u5b9a\u7fa9 *\/\n  inherits: false;           \/* \u7d99\u627f\u3057\u306a\u3044 *\/\n  initial-value: 0;          \/* \u521d\u671f\u5024 *\/\n}\n\n@property --wave-phase {\n  syntax: '<number>';\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --noise-opacity {\n  syntax: '<number>';\n  inherits: false;\n  initial-value: 0;\n}\n\n\/* \u30d7\u30ed\u30b0\u30ec\u30b9\u30d0\u30fc\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n.progress-bar {\n  --progress: 0;\n  --bar-color: #3B82F6;\n  --track-color: #E2E8F0;\n  --bar-radius: 4;\n  --show-gradient: 1;\n\n  background-image: paint(progress-bar);\n  height: 8px;\n  width: 100%;\n\n  \/* @property\u3067\u578b\u5b9a\u7fa9\u3055\u308c\u305f\u5909\u6570\u306f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u53ef\u80fd\uff01 *\/\n  transition: --progress 1.5s ease-in-out;\n}\n\n.progress-bar.loaded {\n  --progress: 0.75;  \/* 0% \u2192 75%\u306b\u6ed1\u3089\u304b\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n}\n\n\/* \u6ce2\u7dda\u30dc\u30fc\u30c0\u30fc\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n@keyframes wave-animation {\n  from { --wave-phase: 0; }\n  to   { --wave-phase: 6.28318; }  \/* 2\u03c0\uff081\u5468\u671f\uff09 *\/\n}\n\n.wavy-card {\n  --wave-amplitude: 4;\n  --wave-frequency: 0.03;\n  --border-color: #8B5CF6;\n  --border-width: 2;\n  --wave-phase: 0;\n\n  background-image: paint(wavy-border);\n  background-color: white;\n  padding: 2rem;\n  border-radius: 12px;\n\n  animation: wave-animation 2s linear infinite;\n}\n\n\/* \u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\uff08CSS Painting API\u975e\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\uff09 *\/\n@supports not (background: paint(x)) {\n  .progress-bar {\n    background-color: #E2E8F0;\n  }\n  .progress-bar::before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: #3B82F6;\n    width: calc(var(--progress, 0) * 100%);\n    border-radius: 4px;\n    transition: width 1.5s ease-in-out;\n  }\n}<\/code><\/pre><\/div>\n\n\n
    \n\n\n\n
    Vite\u3092\u4f7f\u3063\u305fPaintWorklet\u306e\u30d0\u30f3\u30c9\u30eb\u65b9\u6cd5<\/h2>\n\n\n  
    >\/\/ vite.config.ts \u3067\u306ePaintWorklet\u5bfe\u5fdc\n\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  \/\/ Worklet\u30d5\u30a1\u30a4\u30eb\u306f\u901a\u5e38\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u3068\u5225\u6271\u3044\u304c\u5fc5\u8981\n  build: {\n    rollupOptions: {\n      input: {\n        main: 'index.html',\n        \/\/ Worklet\u306f\u5225\u30a8\u30f3\u30c8\u30ea\u30fc\u3068\u3057\u3066\u30d3\u30eb\u30c9\n        paintWorklet: 'src\/worklets\/paint-worklet.js',\n      },\n      output: {\n        entryFileNames: (chunkInfo) => {\n          if (chunkInfo.name === 'paintWorklet') {\n            return 'worklets\/[name].js'  \/\/ \u30cf\u30c3\u30b7\u30e5\u306a\u3057\uff08URL\u304c\u5909\u308f\u308b\u3068\u56f0\u308b\uff09\n          }\n          return 'assets\/[name]-[hash].js'\n        },\n      },\n    },\n  },\n})\n\n\/\/ \u578b\u4ed8\u304dWorklet\u306e\u8aad\u307f\u8fbc\u307f\uff08main.ts\uff09\nasync function loadPaintWorklets() {\n  if (!('paintWorklet' in CSS)) {\n    \/\/ Polyfill \u3092\u52d5\u7684\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\n    const { default: polyfill } = await import('css-paint-polyfill')\n    await polyfill\n  }\n\n  \/\/ \u672c\u756a\u74b0\u5883\u3067\u306f\u30d3\u30eb\u30c9\u3055\u308c\u305fURL\u3092\u4f7f\u7528\n  const workletUrl = import.meta.env.PROD\n    ? '\/worklets\/paintWorklet.js'\n    : new URL('.\/worklets\/paint-worklet.js', import.meta.url).href\n\n  await CSS.paintWorklet.addModule(workletUrl)\n}\n\nloadPaintWorklets().catch(console.error)<\/code><\/pre><\/div>\n\n\n
    \n\n\n\n
    \u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8\u3068Polyfill\u5bfe\u5fdc<\/h2>\n\n\n\n
    \u30d6\u30e9\u30a6\u30b6<\/th>CSS Painting API<\/th>@property<\/th>Layout API<\/th><\/tr><\/thead>
    Chrome 65+<\/td>\u2705<\/td>\u2705\uff0885+\uff09<\/td>\u26a0\ufe0f \u5b9f\u9a13\u7684<\/td><\/tr>
    Edge 79+<\/td>\u2705<\/td>\u2705\uff0885+\uff09<\/td>\u26a0\ufe0f \u5b9f\u9a13\u7684<\/td><\/tr>
    Safari 16.4+<\/td>\u274c<\/td>\u2705\uff0816.4+\uff09<\/td>\u274c<\/td><\/tr>
    Firefox 128+<\/td>\u26a0\ufe0f \u5b9f\u9a13\u7684<\/td>\u2705\uff08128+\uff09<\/td>\u274c<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n  
    >\/* \u30d7\u30ed\u30b0\u30ec\u30c3\u30b7\u30d6\u30a8\u30f3\u30cf\u30f3\u30b9\u30e1\u30f3\u30c8\u306e\u30d1\u30bf\u30fc\u30f3 *\/\n\n\/* 1. \u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u3092\u5148\u306b\u66f8\u304f *\/\n.element {\n  background-color: #f3f4f6;  \/* \u5168\u30d6\u30e9\u30a6\u30b6\u3067\u8868\u793a\u3055\u308c\u308b\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af *\/\n  background-image: url('pattern-fallback.svg');  \/* SVG\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af *\/\n}\n\n\/* 2. @supports \u3067Painting API\u304c\u5229\u7528\u53ef\u80fd\u306a\u3068\u304d\u306e\u307f\u4e0a\u66f8\u304d *\/\n@supports (background: paint(my-painter)) {\n  .element {\n    background-image: paint(my-painter);  \/* \u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\u306e\u307f *\/\n  }\n}\n\n\/* JavaScript\u3067\u306e\u5bfe\u5fdc\u78ba\u8a8d *\/\nif ('paintWorklet' in CSS) {\n  CSS.paintWorklet.addModule('.\/my-worklet.js')\n  document.documentElement.classList.add('css-paint-supported')\n} else {\n  \/\/ css-paint-polyfill \u3067\u975e\u5bfe\u5fdc\u30d6\u30e9\u30a6\u30b6\u3092\u30b5\u30dd\u30fc\u30c8\n  import('css-paint-polyfill').then(() => {\n    CSS.paintWorklet.addModule('.\/my-worklet.js')\n  })\n}\n\n\/* CSS\u5074\u3067\u306e\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u7ba1\u7406 *\/\n.has-pattern {\n  background-color: #1e293b;  \/* \u30c7\u30d5\u30a9\u30eb\u30c8\uff08\u672a\u30b5\u30dd\u30fc\u30c8\u30fbJS\u7121\u52b9\uff09 *\/\n}\n\n.css-paint-supported .has-pattern {\n  background-image: paint(dot-pattern);  \/* JS\u6709\u52b9\u30fbAPI\u5bfe\u5fdc\u6642\u306e\u307f *\/\n}<\/code><\/pre><\/div>\n\n\n
    \n\n\n\n
    CSS Painting API vs SVG\u80cc\u666f\uff5c\u4f7f\u3044\u5206\u3051\u306e\u5224\u65ad\u57fa\u6e96<\/h2>\n\n\n\n
    \u6bd4\u8f03\u9805\u76ee<\/th>CSS Painting API<\/th>SVG\u30a4\u30f3\u30e9\u30a4\u30f3\/data URI<\/th>Canvas\u8981\u7d20<\/th><\/tr><\/thead>
    \u30d6\u30e9\u30a6\u30b6\u30b5\u30dd\u30fc\u30c8<\/td>Chrome\/Edge\uff08\u90e8\u5206\u7684\uff09<\/td>\u5168\u30d6\u30e9\u30a6\u30b6<\/td>\u5168\u30d6\u30e9\u30a6\u30b6<\/td><\/tr>
    CSS\u5909\u6570\u9023\u643a<\/td>\u25ce \u30cd\u30a4\u30c6\u30a3\u30d6\u5bfe\u5fdc<\/td>\u25b3 \u4e00\u90e8\u5bfe\u5fdc\uff08fill=”var()”\uff09<\/td>\u274c \u5225\u9014JS\u304c\u5fc5\u8981<\/td><\/tr>
    \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9<\/td>\u25ce \u30ef\u30fc\u30af\u30ec\u30c3\u30c8\u30b9\u30ec\u30c3\u30c9<\/td>\u25cb \u30d6\u30e9\u30a6\u30b6\u6700\u9069\u5316<\/td>\u25b3 \u30e1\u30a4\u30f3\u30b9\u30ec\u30c3\u30c9<\/td><\/tr>
    \u52d5\u7684\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc<\/td>\u25ce CSS\u5909\u6570\u3067\u52d5\u7684\u5909\u66f4\u30fb\u518d\u63cf\u753b<\/td>\u25b3 SVG\u306e\u518d\u751f\u6210\u304c\u5fc5\u8981<\/td>\u25ce JS\u76f4\u63a5\u64cd\u4f5c<\/td><\/tr>
    \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3<\/td>\u25ce @property\u3068\u7d44\u307f\u5408\u308f\u305b<\/td>\u25cb CSS animation<\/td>\u25ce requestAnimationFrame<\/td><\/tr>
    \u8907\u96d1\u306a\u63cf\u753b<\/td>\u25b3 \u6bd4\u8f03\u7684\u30b7\u30f3\u30d7\u30eb\u306a\u63cf\u753b\u5411\u3051<\/td>\u25ce \u4efb\u610f\u306eSVG\u8868\u73fe<\/td>\u25ce \u30d4\u30af\u30bb\u30eb\u5358\u4f4d\u306e\u64cd\u4f5c<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n  
    >\u3010\u4f7f\u3044\u5206\u3051\u306e\u5224\u65ad\u57fa\u6e96\u3011\n\nCSS Painting API \u3092\u9078\u3076\u5834\u9762\uff1a\n\u2705 CSS\u30d7\u30ed\u30d1\u30c6\u30a3\u306ebackground-image\u3068\u3057\u3066\u81ea\u7136\u306b\u99b4\u67d3\u307e\u305b\u305f\u3044\n\u2705 \u8981\u7d20\u306e\u30ea\u30b5\u30a4\u30ba\u306b\u81ea\u52d5\u8ffd\u5f93\u3059\u308b\u80cc\u666f\u30d1\u30bf\u30fc\u30f3\u3092\u4f5c\u308a\u305f\u3044\n\u2705 CSS\u5909\u6570\u3067\u52d5\u7684\u306b\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u5909\u66f4\u3057\u305f\u3044\n\u2705 CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\uff08@property\uff09\u3068\u9023\u643a\u3055\u305b\u305f\u3044\n\nSVG \u3092\u9078\u3076\u5834\u9762\uff1a\n\u2705 \u5168\u30d6\u30e9\u30a6\u30b6\u3067\u306e\u5b8c\u5168\u306a\u30b5\u30dd\u30fc\u30c8\u304c\u5fc5\u8981\n\u2705 \u8907\u96d1\u306a\u30d9\u30af\u30bf\u30fc\u8868\u73fe\uff08\u66f2\u7dda\u30fb\u30c6\u30ad\u30b9\u30c8\u30fb\u30d5\u30a3\u30eb\u30bf\uff09\n\u2705 \u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\uff08title\/desc\u5c5e\u6027\uff09\u304c\u5fc5\u8981\n\u2705 SEO\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u304c\u5fc5\u8981\u306a\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\n\nCanvas API\u3092\u9078\u3076\u5834\u9762\uff1a\n\u2705 \u30e6\u30fc\u30b6\u30fc\u30a4\u30f3\u30bf\u30e9\u30af\u30b7\u30e7\u30f3\u304c\u5fc5\u8981\uff08\u30af\u30ea\u30c3\u30af\u30fb\u30c9\u30e9\u30c3\u30b0\uff09\n\u2705 \u30d5\u30ec\u30fc\u30e0\u3054\u3068\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\uff08\u30b2\u30fc\u30e0\u30fb3D\uff09\n\u2705 \u30d4\u30af\u30bb\u30eb\u5358\u4f4d\u306e\u51e6\u7406\uff08\u753b\u50cf\u7de8\u96c6\uff09<\/code><\/pre><\/div>\n\n\n
    \n\n\n\n
    \u3088\u304f\u3042\u308b\u8cea\u554f\uff08FAQ\uff09<\/h2>\n\n\n\n
    Q1. PaintWorklet\u3067import\u3092\u4f7f\u3048\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
    A.<\/strong> PaintWorklet\u306e\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3067\u306f import<\/code> \u30b9\u30c6\u30fc\u30c8\u30e1\u30f3\u30c8\u306f\u4f7f\u3048\u307e\u305b\u3093\uff08Worklet\u306f\u72ec\u81ea\u306e\u5236\u9650\u3055\u308c\u305f\u30b0\u30ed\u30fc\u30d0\u30eb\u30b9\u30b3\u30fc\u30d7\u3092\u6301\u3061\u307e\u3059\uff09\u3002\u5916\u90e8\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u4f7f\u3044\u305f\u3044\u5834\u5408\u306f\u3001\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u95a2\u6570\u3092Worklet\u30d5\u30a1\u30a4\u30eb\u306b\u76f4\u63a5\u30b3\u30d4\u30fc\u3059\u308b\u304b\u3001Vite\u306e\u30d3\u30eb\u30c9\u3092\u4f7f\u3063\u3066\u30d0\u30f3\u30c9\u30eb\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002Vite\u3067\u306f import.meta.url<\/code> \u3092\u4f7f\u3063\u3066Worklet\u30d5\u30a1\u30a4\u30eb\u3092\u5225\u30a8\u30f3\u30c8\u30ea\u30fc\u3068\u3057\u3066\u30d3\u30eb\u30c9\u3057\u3001\u30d0\u30f3\u30c9\u30eb\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u3092 CSS.paintWorklet.addModule()<\/code> \u3067\u8aad\u307f\u8fbc\u3080\u65b9\u6cd5\u304c\u73fe\u5b9f\u7684\u3067\u3059\u3002<\/p>\n\n\n\n
    Q2. inputProperties\u3068inputArguments\u306e\u9055\u3044\u306f\u4f55\u3067\u3059\u304b\uff1f<\/h3>\n\n\n\n
    A.<\/strong> inputProperties<\/code>\u306fCSS\u30ab\u30b9\u30bf\u30e0\u30d7\u30ed\u30d1\u30c6\u30a3\uff08--my-var<\/code>\uff09\u306e\u5909\u66f4\u3092\u76e3\u8996\u3057\u3066Worklet\u306b\u6e21\u3057\u307e\u3059\u3002inputArguments<\/code>\u306f paint(painter, arg1, arg2)<\/code> \u306e\u3088\u3046\u306bpaint()\u95a2\u6570\u306b\u76f4\u63a5\u5f15\u6570\u3092\u6e21\u3059\u65b9\u6cd5<\/strong>\u3067\u3059\u3002inputProperties\u306fCSS\u5074\u3067\u5024\u3092\u7ba1\u7406\u3067\u304d\u3066\u67d4\u8edf\u3067\u3059\u304c\u3001inputArguments\u306f\u3088\u308a\u30b7\u30f3\u30d7\u30eb\u306b\u5024\u3092\u6e21\u305b\u307e\u3059\u3002\u73fe\u5728\u306e\u30d6\u30e9\u30a6\u30b6\u5b9f\u88c5\u3067\u306finputProperties\u306e\u65b9\u304c\u30b5\u30dd\u30fc\u30c8\u304c\u5b89\u5b9a\u3057\u3066\u3044\u308b\u305f\u3081\u3001inputProperties\u306e\u4f7f\u7528\u3092\u63a8\u5968\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
    Q3. PaintWorklet\u306e\u30c7\u30d0\u30c3\u30b0\u65b9\u6cd5\u306f\uff1f<\/h3>\n\n\n\n
    A.<\/strong> PaintWorklet\u306f\u901a\u5e38\u306eJS\u3068\u7570\u306a\u308b\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3067\u52d5\u4f5c\u3059\u308b\u305f\u3081\u3001DevTools\u3067\u306e\u30c7\u30d0\u30c3\u30b0\u304c\u5c11\u3057\u7279\u6b8a\u3067\u3059\u3002Chrome DevTools\u3067\u306f\u300cSources\u300d\u30bf\u30d6\u306e\u300cThreads\u300d\u30bb\u30af\u30b7\u30e7\u30f3\u306b\u300cpaint-worklet.js\u300d\u304c\u8868\u793a\u3055\u308c\u3001\u30d6\u30ec\u30fc\u30af\u30dd\u30a4\u30f3\u30c8\u3092\u8a2d\u5b9a\u3067\u304d\u307e\u3059\u3002console.log()<\/code> \u306fWorklet\u5185\u3067\u3082\u4f7f\u7528\u3067\u304d\u3001\u300cConsole\u300d\u30bf\u30d6\u306b\u51fa\u529b\u3055\u308c\u307e\u3059\u3002\u307e\u305aconsole.log\u3067\u4e2d\u9593\u5024\u3092\u78ba\u8a8d\u3057\u306a\u304c\u3089\u958b\u767a\u3059\u308b\u3053\u3068\u3092\u63a8\u5968\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
    Q4. Safari\u975e\u5bfe\u5fdc\u3067\u3082\u672c\u756a\u74b0\u5883\u306b\u4f7f\u3048\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
    A.<\/strong> @supports (background: paint(x)) {}<\/code> \u3092\u4f7f\u3063\u305f\u30d7\u30ed\u30b0\u30ec\u30c3\u30b7\u30d6\u30a8\u30f3\u30cf\u30f3\u30b9\u30e1\u30f3\u30c8\u3067\u5b9f\u88c5\u3059\u308c\u3070\u3001Safari\u3067\u306fCSS\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\uff08\u901a\u5e38\u306e\u80cc\u666f\u8272\u3084\u753b\u50cf\uff09\u304c\u8868\u793a\u3055\u308c\u3001Chrome\/Edge\u3067\u306fPainting API\u306e\u8c4a\u304b\u306a\u8868\u73fe\u304c\u9069\u7528\u3055\u308c\u307e\u3059\u3002\u307e\u305fcss-paint-polyfill<\/strong>\uff08\u301c8KB\uff09\u3092\u4f7f\u3048\u3070Safari\u3092\u542b\u3080\u591a\u304f\u306e\u30d6\u30e9\u30a6\u30b6\u3067Painting API\u3092\u30b7\u30df\u30e5\u30ec\u30fc\u30c8\u3067\u304d\u307e\u3059\u3002\u88c5\u98fe\u7684\u306a\u80cc\u666f\u30d1\u30bf\u30fc\u30f3\u3067\u3042\u308c\u3070\u3001Safari\u3067\u5c11\u3057\u9055\u3046\u898b\u305f\u76ee\u306b\u306a\u3063\u3066\u3082\u30e6\u30fc\u30b6\u30fc\u4f53\u9a13\u306b\u306f\u5927\u304d\u306a\u5f71\u97ff\u304c\u306a\u3044\u305f\u3081\u3001\u672c\u756a\u74b0\u5883\u3067\u306e\u5229\u7528\u306f\u5341\u5206\u73fe\u5b9f\u7684\u3067\u3059\u3002<\/p>\n\n\n\n
    Q5. PaintWorklet\u306f\u30ea\u30b5\u30a4\u30ba\u6642\u306b\u81ea\u52d5\u3067\u518d\u63cf\u753b\u3055\u308c\u307e\u3059\u304b\uff1f<\/h3>\n\n\n\n
    A.<\/strong> \u306f\u3044\u3001\u81ea\u52d5\u7684\u306b\u518d\u63cf\u753b\u3055\u308c\u307e\u3059\u3002CSS\u306ebackground-image\u3068\u3057\u3066\u6a5f\u80fd\u3059\u308b\u305f\u3081\u3001\u8981\u7d20\u306e\u30b5\u30a4\u30ba\u304c\u5909\u308f\u308b\u305f\u3073\u306bpaint()\u30e1\u30bd\u30c3\u30c9\u304c\u65b0\u3057\u3044geometry\uff08width\/height\uff09\u3067\u518d\u547c\u3073\u51fa\u3057\u3055\u308c\u307e\u3059\u3002\u3053\u308c\u306fSVG\u80cc\u666f\u3084Canvas\u8981\u7d20\u3068\u6bd4\u3079\u305f\u5927\u304d\u306a\u30e1\u30ea\u30c3\u30c8\u3067\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u3082\u30d1\u30bf\u30fc\u30f3\u306e\u30b5\u30a4\u30ba\u3084\u5bc6\u5ea6\u304c\u9069\u5207\u306b\u81ea\u52d5\u8abf\u6574\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \u307e\u3068\u3081<\/h2>\n\n\n\n