Bildhintergrund für Leinwand Partikel

Question

Ich versuche, Hintergrund für jedes erstellte Partikel zu erstellen. Leinwandmuster funktioniert nicht richtig. Ich erhalte diesen Fehler >>
"Syntaxerror: Eine ungültige oder illegale Zeichenfolge angegeben wurde"
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) 

}})(); 

Ich habe versucht, mit ctx.drawImage dies auch zu tun (), aber das Bild wurde nur einmal angezeigt.

Irgendwelche Tipps? :) Fiddle

Answer 1

ich glaube, das Problem ist das Bild später als seine verwendet geladen.

In Ihrem draw() Sie haben:

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

es eine schlechte Idee ist es, neue Bilder zu erstellen, jedes Mal wollen Sie zeichnen. Ich schlage vor, dass Sie die img-Variable außerhalb der Zeichnungsschleife erstellen. Sobald Sie die .src eines Bildes festgelegt haben, müssen Sie warten, bis es geladen ist, um es zu verwenden. Es gibt ein Onload-Ereignis, mit dem Sie wissen können, wann es fertig ist. Hier

ein Beispiel:

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'); 
     ... 
    } 
    ... 
}