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

canvas cheat sheet 证明有用

canvas的fillStyle不起作用

1 个答案: