der FillStyle von Canvas funktioniert nicht

Question

Ich habe eine Funktion, die eine Schleife hat. In der Schleife wird eine Leinwand erstellt und die Deckkraft eingestellt. Dann legt es die Hintergrundfarbe fest und konvertiert die Leinwand in ein Bild.

Irgendwie wird die Deckkraft auf der Leinwand gesetzt, aber die Hintergrundfarbe wird nicht gesetzt.

if (remain <= 0) { 
    var canvas = document.createElement('canvas'); 
    context = canvas.getContext('2d'); 
    for (var i = 0; i < img.length; ++i) { 
     if (img[i]) { 
     var opacity = item.opa; 
     context.globalAlpha = opacity; 
     context.drawImage(img[i],0,0); 
     } 
    } 
    var background = mp.colbk; //returns rgb(255,0,0) 
    context.fillStyle = background; 
    var im = new Image(); 
    im.src = canvas.toDataURL(); 
} 

Ich bin nicht sicher, warum mein Hintergrund nicht eingestellt wird. irgendwelche Vorschläge?

Vielen Dank im Voraus.

Answer 1

Mit context.fillStyle = background setzen Sie NICHT die Hintergrundfarbe des Canvas. Stattdessen wird die Füllfarbe des Zeichenwerkzeugs für den Zeichenbereich festgelegt.

Mit anderen Worten, context.fillStyle gilt nur für Linien oder auf der Leinwand danach gezeichneten Formen.

---

auf die Leinwand mit einer Farbe zu füllen, verwenden Sie die fillRect() Funktion:

context.fillStyle = background; 
context.fillRect(0, 0, canvas.width, canvas.height); 

Diese canvas cheat sheet erwies sich als hilfreich sein