画布的填充物不起作用

Question

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

以某种方式将不透明度设置在画布上，但背景颜色未设置。

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

我不确定为什么没有设置我的背景。有什么建议吗？

预先感谢您。

Answer 1

使用context.fillStyle = background，您没有设置画布的背景颜色。相反，它为画布设置了绘图工具的填充颜色。

换句话说， context.fillStyle仅适用于在画布上绘制的线或形状，然后 。

---

要用颜色填充画布，请使用fillRect()功能：

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

此画布备忘单被证明是有用的