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