在畫布內使用圖案（不是img）-有解無憂

當我在 svg 中創建可視化時，我可以使用pattern里面定義的填充一個矩形defs

            <defs>
                <pattern id="hash4_4" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
                    <rect width="4" height="8" transform="translate(0,0)" fill="lightgray"></rect>
                </pattern>
            </defs>

我想在畫布可視化中使用相同的模式，但找不到這樣做的方法。我用谷歌搜索并找到了方法canvas.createPattern()，但所有示例都包括在那里插入影像，而不是上面的自定義矩形圖案。

是否可以以某種方式使用我自己的<pattern>內部畫布？

uj5u.com熱心網友回復：

您可以在 SVG 檔案中使用該模式并將 SVG 繪制為畫布上的影像。

例如，我使用的是資料 URL。

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');


let img = new Image();

img.addEventListener('load', e => {
  ctx.drawImage(e.target, 0, 0);
});

img.src = 'data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgd2lkdGg9IjQwMCIgaGVpZ2h0PSI0MDAiPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9Imhhc2g0XzQiIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPgogICAgICA8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJsaWdodGdyYXkiPjwvcmVjdD4KICAgIDwvcGF0dGVybj4KICA8L2RlZnM CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNoYXNoNF80KSIgLz4KPC9zdmc ';

<p>SVG:<br><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="400" height="400">
  <defs>
    <pattern id="hash4_4" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <rect width="4" height="8" transform="translate(0,0)" fill="lightgray"></rect>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#hash4_4)" />
</svg></p>

<p>Canvas:</p>
<canvas id="canvas" width="400" height="400"></canvas>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486833.html

標籤：javascript svg 帆布

上一篇：為什么兩個SVG形狀的減法仍然相交？

下一篇：SVG內容未顯示在頁面中