ctx.createPatternは、誰かがこれを見て持ってくださいすることができ

Question

が機能していません。私はすべてを試みましたが、私はこのパターンを繰り返すように見えません。キャンバス上で私はキャンバス上に描かれたものの1つだけを取得しますが、それだけです。誰か助けてください。

ありがとうございます。あなたが繰り返し可能な画像としてパターンにキャンバスオブジェクトを渡す

var canvasBg = document.getElementById('canvasBg'); 
var ctxBg = canvasBg.getContext('2d'); 

var gameWidth = canvasBg.width; 
var gameHeight = canvasBg.height; 

var imgSprite = new Image(); 
imgSprite.src = 'images/sprite.png'; 

function drawBg() { 
var grassSrcX = 0; 
var grassSrcY = 0; 
var grassWidth = 74; 
var grassHeight = 10; 
var drawGrassOnCanvasX = 0; 
var drawGrassOnCanvasY = 215; 

ctxBg.drawImage(imgSprite,grassSrcX,grassSrcY,grassWidth,grassHeight,drawGrassOnCanvasX,drawGrassOnCanvasY,grassWidth,grassHeight); 

var pattern = ctxBg.createPattern(canvasBg, 'repeat-x'); 
ctxBg.fillStyle = pattern; 
ctxBg.fillRect(drawGrassOnCanvasX, drawGrassOnCanvasY, gameWidth, gameHeight); 
} 

Answer 1

だから私は、頭のスクラッチの多くの後、この自分自身を解決するために管理し、私が思ったよりもはるかに簡単でした。

HTMLファイルで作成されたキャンバスに描画する前に、ジャバスクリプトファイル内の別のキャンバスを作成したり、<script>タグ内。

var canvasPattern = document.createElement("canvas"); 

が、それは別の要素IDを持っていることを確認してください代わりに私のHTMLファイル (canvasBg)からIDをだった私が使用古いものの ("canvas")をヒント。

このキャンバスは、2D形状

var ctxPattern = canvasPattern.getContext("2d"); 

を描き、今を確認するために、それは幅と高さ

canvasPattern.width = 74; 
canvasPattern.height = 10; 

今コンテキスト変数を作成して与えると、パターンとして使用されるイメージ新しい作成されたキャンバスに描画されます。

ctxPattern.drawImage(imgSprite,grassSrcX,grassSrcY,grassWidth,grassHeight,drawGrassOnCanvasX,drawGrassOnCanvasY,grassWidth,grassHeight); 

最終的にあなたの古いキャンバス（HTMLファイルで作成されたもの）の上に、あなたのパターを描き、パターンの繰り返しをしましょう。ここで

var pattern = ctxBg.createPattern(canvasPattern, 'repeat-x'); 
ctxBg.fillStyle = pattern; 
ctxBg.fillRect(0, 0, 800, 500); 

いっぱいスクリプトです、これは私が `VARパターン= ctxBg.createPattern交換してみました:)

var canvasBg = document.getElementById('canvasBg'); 
var ctxBg = canvasBg.getContext('2d'); 

var gameWidth = canvasBg.width; 
var gameHeight = canvasBg.height; 

var imgSprite = new Image(); 
imgSprite.src = 'images/sprite.png'; 

function drawBg() { 

var canvasPattern = document.createElement("canvas"); 
canvasPattern.width = 74; 
canvasPattern.height = 10; 
var ctxPattern = canvasPattern.getContext("2d"); 

var grassSrcX = 0; 
var grassSrcY = 0; 
var grassWidth = 74; 
var grassHeight = 10; 
var drawGrassOnCanvasX = 0; 
var drawGrassOnCanvasY = 215; 

ctxPattern.drawImage(imgSprite,grassSrcX,grassSrcY,grassWidth,grassHeight,drawGrassOnCanvasX,drawGrassOnCanvasY,grassWidth,grassHeight); 

var pattern = ctxBg.createPattern(canvasPattern, 'repeat-x'); 
ctxBg.fillStyle = pattern; 
ctxBg.fillRect(0, 0, gameWidth, gameHeight); 
} 

Answer 2

、あなたは（私はこのケースで草を想定）繰り返したい画像に変更する必要があります。