创建HTML5canvas模式并用它们填充内容

我与.createPattern(image,"repeat")有.createPattern(image,"repeat") 。

1.我可以使用.toDataURL()和.createPattern()创建的自己的模式填充正方形吗？

2.我可以填充一个带有图案的正方形，这是当前的canvas吗？

我的jsFiddle

HTML

JavaScript的

 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();` 

Answer 1

您将需要为模式创建单独的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();