画布的fillStyle不起作用 [英] the fillStyle of canvas is not working

问题描述

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

i have a function that has a loop. in the loop it creates a canvas and sets the opacity. Then it sets the background color and converts the canvas to an image.

不知何故在画布上设置了不透明度，但是背景色没有得到组。

Somehow the Opacity is being set on the canvas but the background color doesn't get set.

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

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

Im not sure why my background is not being set. any suggestions?

谢谢。

推荐答案

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

With context.fillStyle = background, you are NOT setting the background color of the canvas. Instead, it sets the fill color of the drawing tool for the canvas.

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

In other words, context.fillStyle only applies to lines or shapes drawn on the canvas afterwards.

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

To fill the canvas with a color, use the fillRect() function:

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

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

This canvas cheat sheet proved to be helpful

这篇关于画布的fillStyle不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！