创建HTML5画布纹理和用它们填充东西

Question

我在使用.createPattern(image,"repeat")时遇到了困难。

1. 我是否可以通过.toDataURL()和.createPattern()创建自己的图案并将其填充到一个方块中？
2. 我是否可以用当前画布中的图案来填充一个方块？

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.strokeRect(0.5, 0.5, 10, 10);
context.arc(5.5, 5.5, 3, 0, Math.PI);
context.rect(3, 3, 1, 1);
context.rect(7, 3, 1, 1);
context.stroke();

var img = new Image();
img.src = canvas.toDataURL();
context.drawImage(img, 10, 10); // works

context.beginPath();
var pattern = context.createPattern(img, "repeat"); // doesn't work
context.fillStyle = pattern;
context.fillRect(20, 20, 100, 100);
context.fill();

context.beginPath();
var pattern2 = context.createPattern(canvas, "repeat"); // doesn't work
context.fillStyle = pattern2;
context.fillRect(120, 20, 100, 100);
context.fill();

<canvas id="canvas" width="320" height="240" style="border: solid darkblue 1px;background-color: aliceblue"></canvas>

- VixinG

Answer 1

由于无法自我引用画布以与模式一起使用，因此您需要为模式创建单独的画布。

原因是当您引用要绘制到的原始画布时，模式将具有相同的大小，并且只会绘制一个实例，因为没有多余的空间。

因此，为了使其工作，您需要定义一个较小的模式，因此我们需要一个单独的画布或图像，并将其作为模式的源传递。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

// create the off-screen canvas
var canvasPattern = document.createElement("canvas");
canvasPattern.width = 10;
canvasPattern.height = 10;
var contextPattern = canvasPattern.getContext("2d");

// draw pattern to off-screen context
contextPattern.beginPath();
contextPattern.strokeRect(0.5, 0.5, 10, 10);
contextPattern.arc(5.5, 5.5, 3, 0, Math.PI);
contextPattern.rect(3, 3, 1, 1);
contextPattern.rect(7, 3, 1, 1);
contextPattern.stroke();

// now pattern will work with canvas element    
var pattern = context.createPattern(canvasPattern,"repeat");
context.fillStyle = pattern;
context.fillRect(20, 20, 100, 100);
context.fill();

<canvas id="canvas" width="320" height="240" style="border: solid darkblue 1px;background-color: aliceblue"></canvas>

- user1693593

---

嗯，原来是这样工作的。奇怪它不接受自我重复。谢谢。 - VixinG

哦，为什么它不接受图像作为模式 var img = new Image(); img.src = canvas.toDataURL();？ - VixinG

@VixinG，问题在于整个画布被用作图案，因此只会绘制一个实例，因为它们的大小相同（如果您删除beginPath，您将看到在原始代码中）。离屏画布或图像具有不同的大小，这对于制作图案是必要的。希望这讲得通 :) - user1693593

@VixinG 出于同样的原因，图像引用画布并具有相同的大小（没有图案的空间）。 - user1693593

现在我明白了。谢谢你的澄清 :) 祝你有美好的一天。 - VixinG