4

で困ってい.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>

4

1 に答える 1

7

パターンで使用するためにキャンバスを自己参照できないため、パターン用に別のキャンバスを作成する必要があります。

その理由は、描画しようとしている元のキャンバスを参照すると、パターンは同じサイズになり、それ以上のスペースがないため、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>

于 2013-07-08T01:53:04.720 に答える