キャンバス粒子の背景画像

Question

作成したすべてのパーティクルの背景を作成しようとしています。 キャンバスパターンが正しく動作していません。私は、このエラー>>
取得しています "にSyntaxErrorを：無効または不正な文字列が指定されました"
HTML

<canvas id="canvas"></canvas> 

JS

(function(){ 

window.onload = function(){ 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'), 
    particles = {}, 
    particleIndex = 0, 
    particleNum = 1; 

    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 

    ctx.fillStyle = '#000'; 
    ctx.fillRect(0, 0, canvas.width, canvas.width); 

    function Particle(){ 
     this.x = canvas.width/2; 
     this.y = 0; 
     this.vx = Math.random() * 10 - 5; 
     this.vy = Math.random() * 10 - 5; 
     this.gravity = 0.2; 
     particleIndex++; 
     particles[particleIndex] = this; 
     this.id = particleIndex; 
     this.test = 0; 
     this.maxLife = 100; 
    } 
    Particle.prototype.draw = function(){ 
     this.x += this.vx; 
     this.y += this.vy; 
     this.vy += this.gravity; 
     this.test++; 
     if (this.test >= this.maxLife) { 
      delete particles[this.id]; 
     }; 

     var img = new Image(); 
     img.src = 'img/aaa.png'; 
     var pattern = ctx.createPattern(img,'repeat'); 

     ctx.fillStyle = pattern; 
     ctx.fillRect(this.x, this.y, 20, 20); 
    }; 


    setInterval(function(){ 
     ctx.fillStyle = "#000"; 
     ctx.fillRect(0, 0, canvas.width, canvas.height); 


     for (var i = 0; i < particleNum; i++) { 
      new Particle(); 
     }; 

     for(var i in particles) { 
      particles[i].draw(); 
     } 

    },30) 

}})(); 

私はctx.drawImageでこれもやろうとしました（ ）、画像は一度だけ表示されました。

任意のヒント？:) Fiddle

Answer 1

私は、問題は、後でその使用よりもロードされているイメージだと思います。あなたのドローインサイド

（）あなたが持っている：

var img = new Image(); 
    img.src = 'img/aaa.png'; 
    var pattern = ctx.createPattern(img,20,20); 

毎回あなたが描きたい新しい画像を作成することは悪い考えです。 drawループの外でimg変数を作成することを強くお勧めします。イメージの.srcを設定したら、イメージをロードするまで待つ必要があります。オンロードイベントがあり、準備が整ったときに知らせることができます。ここで

は一例です：私たちは、あなたが使用しようとしているライブラリかを知るように

var imgLoaded = false; 
var img = new Image(); 
img.src = 'img/aaa.png'; 
img.onload = function() { imgLoaded = true; }; 

function draw() { 
    ... 
    if (imgLoaded) { 
     var pattern = ctx.createPattern(img, 'repeat'); 
     ... 
    } 
    ... 
}