1 
 <canvas id="textureCanvas" width="3" height="1">what kind of cheap ass browser are you using? (I'm joking... something went wrong)</canvas>


   window.onload = function () {
var mainCanvas = document.getElementById('mainCanvas');
var textureCanvas = document.getElementById('textureCanvas');

var mainContext = mainCanvas.getContext('2d');
var textureContext = textureCanvas.getContext('2d');

textureContext.fillStyle = 'grey';
textureContext.fillRect(0, 0, 1, 1);

textureContext.fillStyle = 'lightgrey';
textureContext.fillRect(1, 0, 1, 1);

textureContext.fillStyle = 'grey';
textureContext.fillRect(2, 0, 1, 1);

var pattern = mainCanvas.createPattern(textureCanvas, 'repeat');

mainCanvas.fillStyle = pattern;

mainCanvas.fillRect(0, 0, 198, 99);
 };

最初のキャンバスを 2 番目のキャンバスのパターンとして使用しようとしています。これはダミーガイドの例です。表示されるのは空白のページだけです。mainCanvas の背景を緑に設定してみましたが、表示されます。私はダミーだと思います。

4

1 に答える 1

1

問題は、mainCanvas に描画するときmainCanvasではなく、参照していることです。mainContext(mainCanvas の ID を持つキャンバス要素があると仮定しています)

コードを次のように変更します。

var mainCanvas = document.getElementById('mainCanvas');
var textureCanvas = document.getElementById('textureCanvas');

var mainContext = mainCanvas.getContext('2d');
var textureContext = textureCanvas.getContext('2d');

textureContext.fillStyle = 'grey';
textureContext.fillRect(0, 0, 1, 1);

textureContext.fillStyle = 'lightgrey';
textureContext.fillRect(1, 0, 1, 1);

textureContext.fillStyle = 'grey';
textureContext.fillRect(2, 0, 1, 1);

var pattern = mainContext.createPattern(textureCanvas, 'repeat'); // <====

mainContext.fillStyle = pattern; // <====

mainContext.fillRect(0, 0, 198, 99); // <====

例

于 2013-08-28T00:09:47.910 に答える