Javascript 创建HTML5画布模式并用它们填充内容

我在

.createPattern（图像，“重复”）

方面遇到困难

我可以用

.toDataURL（）

和

.createPattern（）

创建的我自己的模式填充一个正方形吗

我可以用一个图案填充一个正方形吗，这是当前画布

var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
strokeRect（0.5,0.5,10,10）；
arc（5.5,5.5,3,0，Math.PI）；
context.rect（3,3,1,1）；
context.rect（7,3,1,1）；
stroke（）；
var img=新图像（）；
img.src=canvas.toDataURL（）；
上下文。drawImage（img，10，10）；//作品
context.beginPath（）；
var pattern=context.createPattern（img，“repeat”）；//不起作用
context.fillStyle=模式；
fillRect（20,20,100,100）；
context.fill（）；
context.beginPath（）；
var pattern2=context.createPattern（画布，“重复”）；//不起作用
context.fillStyle=pattern2；
fillRect（120,20,100,100）；
context.fill（）
您将需要为模式创建一个单独的画布，因为您无法自引用画布以用于模式

原因是，当您引用试图绘制到的原始画布时，该图案将具有相同的大小，并且将只绘制一个实例，因为没有空间容纳更多的实例

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


var canvas=document.getElementById（“canvas”）；
var context=canvas.getContext（“2d”）；
//创建屏幕外画布
var canvasPattern=document.createElement（“canvas”）；
canvasPattern.width=10；
canvasPattern.height=10；
var contextPattern=canvasPattern.getContext（“2d”）；
//将图案绘制到屏幕外上下文
contextPattern.beginPath（）；
strokeRect（0.5,0.5,10,10）；
arc（5.5,5.5,3,0，Math.PI）；
rect（3,3,1,1）；
contextPattern.rect（7,3,1,1）；
stroke（）；
//现在模式将与canvas元素一起工作
var pattern=context.createPattern（canvasPattern，“repeat”）；
context.fillStyle=模式；
fillRect（20,20,100,100）；
context.fill（）
Hmmm，这就是它的工作原理。奇怪的是，它不接受自我重复。谢谢。噢，为什么它不接受图像作为模式
var img=new image（）；img.src=canvas.toDataURL（）？@VixinG问题在于整个画布被用作模式，因此它将只绘制一个实例，因为它的大小相同（如果删除beginPath，您将在原始代码中看到）。屏幕外的画布或图像具有不同的大小，这是制作图案所必需的。希望有意义：）@VixinG出于同样的原因，图像引用了画布，并且具有与现在意义相同的大小（没有放置图案的空间）。感谢您的澄清：）祝您度过愉快的一天