Javascript 画布的填充样式不起作用

我有一个有循环的函数。在循环中，它创建画布并设置不透明度。 然后设置背景色并将画布转换为图像

不知何故，画布上设置了不透明度，但没有设置背景色

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();
}

---

如果使用
context.fillStyle=background，则不设置画布的背景色。相反，它设置画布的绘图工具的填充色

换句话说，
context.fillStyle
只适用于在画布上绘制的线条或形状


要使用颜色填充画布，请使用
fillRect（）
函数：

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

这证明是有帮助的。
不透明度的值是0.5@moáoisNo。不透明度很好。我希望背景颜色也能正常工作。目前没有设置背景。因此图像应该同时具有不透明度和背景。@moáoism现在我得到了一个黑色背景，我可以用什么来设置背景？在我的情况下是什么我应该使用吗？@alosoi如果您想用纯色填充画布，请使用
fillRect（）绘制一个矩形
函数。确保绘制时正确设置了
globalAlpha
和
fillStyle
。如果只想填充图像中透明的部分，则必须在其他内容后面绘制矩形
。这可以通过
globalCompositeOperation
实现。我得到一个黑色背景现在