我在使用 .createPattern(image,"repeat")
时遇到困难。
- 我可以用
.toDataURL()
和.createPattern()
创建的自己的图案填充一个正方形吗? - 我可以用当前 Canvas 的图案填充正方形吗?
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>
最佳答案
您需要为图案创建一个单独的 Canvas ,因为您无法自行引用 Canvas 以用于图案。
原因是当您引用要绘制的原始 Canvas 时,图案将具有相同的大小并且只会绘制一个实例,因为没有空间容纳更多实例。
因此,要使其工作,您需要定义一个较小尺寸的图案,因此我们需要一个单独的 Canvas 或图像,并将其作为图案的源传入。
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>
关于javascript - 创建 HTML5 Canvas 图案并用它们填充内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17518107/