javascript - Canvas 的 fillStyle 不起作用

Question

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

不知何故， Canvas 上设置了不透明度，但背景颜色未设置。

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，您不会设置 Canvas 的背景颜色。相反，它设置 Canvas 绘图工具的填充颜色。

换句话说，context.fillStyle 仅适用于之后在 Canvas 上绘制的线条或形状。

<小时/>

要使用颜色填充 Canvas ，请使用 fillRect() 函数:

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

这个 canvas cheat sheet 事实证明很有帮助