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

查看:35
本文介绍了画布的填充样式不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆