創建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> 

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>