在 canvas 中使用模式（不是 img）

Question

当我在 svg 中创建可视化时，我可以使用在 defs

中定义的 pattern 填充一个矩形

            <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 可视化中使用相同的模式，但找不到方法。我用谷歌搜索并找到了方法 canvas.createPattern() 但所有示例都包括在其中插入图像，而不是如上所述的自定义矩形图案。

是否可以在 canvas 中使用我自己的 <pattern>？

Answer 1

您可以在 SVG 文档中使用该图案并将 SVG 绘制为 canvas 上的图像。

对于示例，我使用的是数据 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>

在 canvas 中使用模式（不是 img）

Use pattern (not img) inside canvas

javascript

svg

canvas