Question

在Canvas / HTML5中，我知道你可以使用RGBA为fillStyle或strokeStyle设置颜色和alpha透明度。您也可以仅使用RGB来设置没有Alpha通道的颜色。有没有办法可以在不提供颜色的情况下更改项目的alpha值。

我的例子是想要在颜色随机或不再知道的画布部分上方更改fillStyle或strokeStyle。有没有办法通过另一个属性更改alpha或通过不传递颜色（例如ctx.fillStyle ='rgba（,,, alphaValue）';）

Answer 1

有几种方法。

首先，上下文的globalAlpha属性。

正如您在标题中提到的那样，它将允许透明度与填充或描边无关。

然后，您可以使用点上的getImageData查找颜色并保存该信息，使用clearRect清除该区域，设置globalAlpha，然后使用你保存的颜色。

当然，您根本不需要globalAlpha。您也可以执行上述操作，而不是设置全局alpha，只需修改您保存的颜色的alpha。

如果你想让一个大而复杂的画布区域变得更加透明，那么你将需要更改globalAlpha，然后使用drawImage 将画布绘制到自身。

Here's an example of that.我画了两个矩形，然后在它们之间形成一个矩形区域更透明。

Answer 2

您可以使用一个函数从您感兴趣的样式中设置的RGB值中提取RGB值，然后使用所需的alpha设置它：

var rgb = hexToRgb(canvasCtx.fillStyle);
canvasCtx.fillStyle = "rgba(" + rgb["r"] + "," +rgb["g"] + "," + rgb["b"] + ",0.2)";

您可以使用类似于此的hexToRgb函数，取自this other answer：

function hexToRgb(hex) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

可以在Canvas HTML5中将Alpha透明度填充或描边样式与RGB分开设置吗？

2 个答案: