{"id":189,"date":"2025-11-25T09:11:12","date_gmt":"2025-11-25T01:11:12","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=189"},"modified":"2025-11-25T09:11:12","modified_gmt":"2025-11-25T01:11:12","slug":"%e4%bd%bf%e7%94%a8fedisplacementmapfeimage%e6%bb%a4%e9%95%9c%e5%ae%9e%e7%8e%b0%e6%b0%b4%e6%b3%a2%e7%ba%b9%e6%95%88%e6%9e%9c%e8%ae%a1%e7%ae%97%e5%8a%a8%e6%80%81%e5%80%bc","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/25\/%e4%bd%bf%e7%94%a8fedisplacementmapfeimage%e6%bb%a4%e9%95%9c%e5%ae%9e%e7%8e%b0%e6%b0%b4%e6%b3%a2%e7%ba%b9%e6%95%88%e6%9e%9c%e8%ae%a1%e7%ae%97%e5%8a%a8%e6%80%81%e5%80%bc\/","title":{"rendered":"\u4f7f\u7528feDisplacementMap+feImage\u6ee4\u955c\u5b9e\u73b0\u6c34\u6ce2\u7eb9\u6548\u679c(\u8ba1\u7b97\u52a8\u6001\u503c)"},"content":{"rendered":"\n

\u597d\u7684\uff0c\u963f\u6770\u3002\u4e0b\u9762\u7ed9\u4f60\u4e00\u4e2a\u5b8c\u6574\u7684 SVG + feDisplacementMap<\/code> + feImage<\/code> \u6c34\u6ce2\u7eb9\u52a8\u6001\u6548\u679c<\/strong>\u793a\u4f8b\uff0c\u5e76\u8bb2\u89e3\u5982\u4f55 \u8ba1\u7b97\u52a8\u6001\u503c\u6765\u9a71\u52a8\u6c34\u6ce2\u7eb9\u52a8\u753b<\/strong>\u3002
\u8fd9\u4e2a\u65b9\u6cd5\u5229\u7528 \u6ee4\u955c\u4f4d\u79fb\u56fe + \u52a8\u6001\u52a8\u753b\u5e27<\/strong> \u6765\u5b9e\u73b0\u6ce2\u7eb9\u6548\u679c\uff0c\u975e\u5e38\u9002\u5408\u7f51\u9875 H5\u3001Canvas \u66ff\u4ee3\u65b9\u6848\u6216 SVG \u52a8\u753b\u3002<\/p>\n\n\n\n

\n\n\n\n

1\ufe0f\u20e3 \u539f\u7406\u6982\u8ff0<\/h1>\n\n\n\n
    \n
  • feDisplacementMap<\/code><\/strong>
    \u5c06\u4e00\u5f20\u7070\u5ea6\u56fe\uff08\u6216\u566a\u58f0\u56fe\uff09\u4f5c\u4e3a\u4f4d\u79fb\u6e90\uff0c\u5bf9\u76ee\u6807\u56fe\u50cf\u8fdb\u884c\u50cf\u7d20\u504f\u79fb\uff0c\u5b9e\u73b0\u626d\u66f2\u6548\u679c\u3002<\/li>\n\n\n\n
  • feImage<\/code><\/strong>
    \u7528\u4f5c\u4f4d\u79fb\u56fe\uff08displacement map\uff09\uff0c\u53ef\u4ee5\u7528\u566a\u58f0\u56fe\u6216\u52a8\u6001\u751f\u6210\u7684\u566a\u58f0\u7eb9\u7406\u3002<\/li>\n\n\n\n
  • \u52a8\u6001\u6c34\u6ce2\u7eb9<\/strong>
    \u901a\u8fc7\u6539\u53d8 feImage<\/code> \u7684 x<\/code> \/ y<\/code> \u504f\u79fb\u6216\u6ee4\u955c\u5c5e\u6027\uff0c\u6216\u8005\u7528 <animate><\/code> \u6216 JS \u52a8\u6001\u6539\u53d8\u6ee4\u955c\u53c2\u6570\uff0c\u5b9e\u73b0\u52a8\u753b\u6548\u679c\u3002<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n

    2\ufe0f\u20e3 \u7b80\u5355 SVG \u6c34\u6ce2\u7eb9\u793a\u4f8b<\/h1>\n\n\n
    \n&lt;svg width="400" height="300">\n  &lt;!-- \u539f\u59cb\u56fe\u7247 -->\n  &lt;image id="source" href="your-image.jpg" width="400" height="300">&lt;\/image>\n\n  &lt;!-- \u5b9a\u4e49\u6ee4\u955c -->\n  &lt;filter id="ripple" x="0" y="0" width="100%" height="100%">\n    &lt;!-- \u4f4d\u79fb\u6e90\u56fe\u7247\uff0c\u53ef\u4ee5\u662f\u566a\u58f0\u56fe -->\n    &lt;feImage id="noise" href="noise.png" result="displacementMap" x="0" y="0"\/>\n    &lt;!-- DisplacementMap -->\n    &lt;feDisplacementMap in="SourceGraphic" in2="displacementMap"\n      scale="20" xChannelSelector="R" yChannelSelector="G"\/>\n  &lt;\/filter>\n\n  &lt;!-- \u5e94\u7528\u6ee4\u955c -->\n  &lt;image href="your-image.jpg" width="400" height="300" filter="url(#ripple)">&lt;\/image>\n&lt;\/svg>\n\n<\/pre><\/div>\n\n\n
    \u53c2\u6570\u8bf4\u660e<\/h3>\n\n\n\n
    \u5c5e\u6027<\/th>\u8bf4\u660e<\/th><\/tr><\/thead>
    scale<\/code><\/td>\u4f4d\u79fb\u5e45\u5ea6\uff0c\u6570\u5b57\u8d8a\u5927\u6ce2\u7eb9\u8d8a\u660e\u663e<\/td><\/tr>
    xChannelSelector<\/code> \/ yChannelSelector<\/code><\/td>\u4f7f\u7528\u54ea\u4e00\u4e2a\u901a\u9053\u63a7\u5236\u504f\u79fb\uff08R\/G\/B\/A\uff09<\/td><\/tr>
    in<\/code> \/ in2<\/code><\/td>in<\/code> \u662f\u539f\u56fe\uff0cin2<\/code> \u662f\u4f4d\u79fb\u56fe<\/td><\/tr>
    feImage<\/code> href<\/td>\u4f4d\u79fb\u6e90\u56fe\uff0c\u53ef\u4ee5\u662f\u566a\u58f0\u56fe<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n\n\n\n
    3\ufe0f\u20e3 \u52a8\u6001\u8ba1\u7b97\u6ce2\u7eb9\u504f\u79fb\u503c\uff08JavaScript \u52a8\u6001\u4fee\u6539 scale<\/code> \u6216 feImage<\/code> \u504f\u79fb\uff09<\/h1>\n\n\n
    \n&lt;svg id="svg" width="400" height="300">\n  &lt;defs>\n    &lt;filter id="ripple" x="0" y="0" width="100%" height="100%">\n      &lt;feImage id="noise" href="noise.png" result="displacementMap" x="0" y="0"\/>\n      &lt;feDisplacementMap id="dispMap"\n        in="SourceGraphic" in2="displacementMap"\n        scale="0" xChannelSelector="R" yChannelSelector="G"\/>\n    &lt;\/filter>\n  &lt;\/defs>\n\n  &lt;image href="your-image.jpg" width="400" height="300" filter="url(#ripple)">&lt;\/image>\n&lt;\/svg>\n\n&lt;script>\nconst dispMap = document.getElementById('dispMap');\nlet t = 0;\n\n\/\/ \u52a8\u6001\u6c34\u6ce2\u7eb9\nfunction animate() {\n  \/\/ \u4f7f\u7528\u6b63\u5f26\u51fd\u6570\u8ba1\u7b97 scale\uff0c\u5b9e\u73b0\u6ce2\u52a8\n  const scale = 10 + 10 * Math.sin(t * 0.1); \n  dispMap.setAttribute('scale', scale);\n\n  \/\/ \u53ef\u4ee5\u540c\u65f6\u52a8\u6001\u6539\u53d8 feImage x\/y \u504f\u79fb\n  const noise = document.getElementById('noise');\n  noise.setAttribute('x', 20 * Math.sin(t * 0.05));\n  noise.setAttribute('y', 20 * Math.cos(t * 0.05));\n\n  t++;\n  requestAnimationFrame(animate);\n}\nanimate();\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
    \u2705 \u5173\u952e\u70b9<\/h3>\n\n\n\n
      \n
    1. \u52a8\u6001 scale<\/strong>
      \u4f7f\u7528 Math.sin<\/code> \u6216 Math.cos<\/code> \u4ea7\u751f\u5468\u671f\u6027\u53d8\u5316\uff0c\u6a21\u62df\u6c34\u6ce2\u4e0a\u4e0b\u6d6e\u52a8\u3002<\/li>\n\n\n\n
    2. \u52a8\u6001\u79fb\u52a8\u4f4d\u79fb\u56fe<\/strong>
      \u6539\u53d8 feImage<\/code> \u7684 x<\/code>\u3001y<\/code> \u53ef\u4ee5\u8ba9\u6ce2\u7eb9\u65b9\u5411\u3001\u6d41\u52a8\u901f\u5ea6\u66f4\u81ea\u7136\u3002<\/li>\n\n\n\n
    3. requestAnimationFrame<\/strong>
      \u6bcf\u5e27\u66f4\u65b0\uff0c\u5e73\u6ed1\u52a8\u753b\uff0c\u6027\u80fd\u66f4\u597d\u3002<\/li>\n\n\n\n
    4. \u566a\u58f0\u56fe\u9009\u62e9<\/strong>\n
        \n
      • \u53ef\u4ee5\u662f\u7070\u5ea6\u968f\u673a\u566a\u58f0\u56fe<\/li>\n\n\n\n
      • \u6216\u8005\u7528 Canvas \u52a8\u6001\u751f\u6210\u566a\u58f0\u56fe \u2192 toDataURL<\/code> \u2192 feImage href<\/code> \u52a8\u6001\u66ff\u6362\uff0c\u5b9e\u73b0\u590d\u6742\u6c34\u6ce2\u7eb9\u6548\u679c\u3002<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
        \n\n\n\n
        4\ufe0f\u20e3 \u9ad8\u7ea7\u6280\u5de7<\/h1>\n\n\n\n
          \n
        • \u591a\u5c42\u6ee4\u955c\u53e0\u52a0<\/strong>
          \u901a\u8fc7\u591a\u4e2a feDisplacementMap<\/code> \u53e0\u52a0\u4e0d\u540c\u9891\u7387\u566a\u58f0\uff0c\u5b9e\u73b0\u66f4\u771f\u5b9e\u6c34\u6ce2\u7eb9\u3002<\/li>\n\n\n\n
        • \u57fa\u4e8e Canvas \u52a8\u6001\u751f\u6210\u566a\u58f0\u56fe<\/strong> const canvas = document.createElement('canvas'); canvas.width = 400; canvas.height = 300; const ctx = canvas.getContext('2d'); const imgData = ctx.createImageData(400, 300); for(let i=0;i<imgData.data.length;i+=4){ const v = Math.random()*255; imgData.data[i] = v; \/\/ R imgData.data[i+1] = v; \/\/ G imgData.data[i+2] = v; \/\/ B imgData.data[i+3] = 255; \/\/ A } ctx.putImageData(imgData,0,0); noise.setAttribute('href', canvas.toDataURL());<\/code><\/li>\n\n\n\n
        • \u7ed3\u5408 CSS \/ JS<\/strong>
          \u53ef\u628a SVG \u653e\u5230 <div><\/code> \u80cc\u666f\u4e2d\uff0c\u5b9e\u73b0\u7f51\u9875\u5168\u5c4f\u6c34\u6ce2\u7eb9\u52a8\u6001\u6548\u679c\u3002<\/li>\n<\/ul>\n\n\n\n
          \n\n\n\n
          5\ufe0f\u20e3 \u603b\u7ed3<\/h1>\n\n\n\n