Canvas 如何将RGBA样式颜色转换为画布友好颜色？

我试图在画布上画出与电脑风格相同的颜色

对于像这样的颜色，这很好：

rgb（0、255、255）”

但是对于像这样的事情

rgba（0,0,0,0）

画布上为黑色，但浏览器中为白色

匹配DOM颜色混合 红色、绿色、蓝色和Alpha通道

大多数情况下，您在浏览器中看到的所有图形都由4个通道组成。前3个通道是颜色通道，表示每个组件颜色的强度，红色、绿色和蓝色。第四个通道是Alpha通道，表示像素的透明度。存储在内存中的每个通道宽8位，可容纳256张光盘rete值。对于颜色通道，0表示没有贡献，255表示完全强度。alpha通道也有256个可能值，从0完全透明到255完全不透明。但传统上，alpha表示为0到1的单位值

我们可以使用CSS颜色字符串

rgba（红色、绿色、蓝色、alpha）

来表示像素颜色

来源过度混合

当一个像素的alpha值<1（字节值<255）时，它与它下面的像素混合（这是由硬件完成的），屏幕上的结果像素是两个像素的混合

混合像素的标准公式基于1984年的一篇论文

在最简单的形式下，当在另一个像素上绘制一个像素时，使用所有通道的字节值，使用以下过程，称为“源代码覆盖”。参考W3C

将它放入一个同样的函数中，再加上两个辅助函数

函数blendSourceOver（s，d）{
var ad=d.a/255；//标准化目标alpha
var as=s.a/255；//和源
var ar=as+ad*（1-as）；
var r={}；
r、 r=数学圆（（s.r*as+d.r*ad*（1-as））/ar）；
r、 g=数学四舍五入（（s.g*as+d.g*ad*（1-as））/ar）；
r、 b=数学四舍五入（（s.b*as+d.b*ad*（1-as））/ar）；
r、 a=数学四舍五入（ar*255）；
返回r；
}
功能rgbaToColour（col）{
col=col.replace（“rgba（“，”）。replace（“），”）。split（“，”）；
var r={}；
r、 r=数量（列[0]）；
r、 g=数量（列[1]）；
r、 b=数量（列[2]）；
r、 a=数学四舍五入（数字（列[3]）*255）；
返回r；
}
函数颜色TORGBA（col）{
返回`rgba（${col.r}，${col.g}，${col.b}，${col.a/255}）`；
}

匹配DOM颜色混合 红色、绿色、蓝色和Alpha通道

大多数情况下，您在浏览器中看到的所有图形都由4个通道组成。前3个通道是颜色通道，表示每个组件颜色的强度，红色、绿色和蓝色。第四个通道是Alpha通道，表示像素的透明度。存储在内存中的每个通道宽8位，可容纳256张光盘rete值。对于颜色通道，0表示没有贡献，255表示完全强度。alpha通道也有256个可能值，从0完全透明到255完全不透明。但传统上，alpha表示为0到1的单位值

我们可以使用CSS颜色字符串

rgba（红色、绿色、蓝色、alpha）

来表示像素颜色

来源过度混合

当一个像素的alpha值<1（字节值<255）时，它与它下面的像素混合（这是由硬件完成的），屏幕上的结果像素是两个像素的混合

混合像素的标准公式基于1984年的一篇论文

在最简单的形式下，当在另一个像素上绘制一个像素时，使用所有通道的字节值，使用以下过程，称为“源代码覆盖”。参考W3C

将它放入一个同样的函数中，再加上两个辅助函数

函数blendSourceOver（s，d）{
var ad=d.a/255；//标准化目标alpha
var as=s.a/255；//和源
var ar=as+ad*（1-as）；
var r={}；
r、 r=数学圆（（s.r*as+d.r*ad*（1-as））/ar）；
r、 g=数学四舍五入（（s.g*as+d.g*ad*（1-as））/ar）；
r、 b=数学四舍五入（（s.b*as+d.b*ad*（1-as））/ar）；
r、 a=数学四舍五入（ar*255）；
返回r；
}
功能rgbaToColour（col）{
col=col.replace（“rgba（“，”）。replace（“），”）。split（“，”）；
var r={}；
r、 r=数量（列[0]）；
r、 g=数量（列[1]）；
r、 b=数量（列[2]）；
r、 a=数学四舍五入（数字（列[3]）*255）；
返回r；
}
函数颜色TORGBA（col）{
返回`rgba（${col.r}，${col.g}，${col.b}，${col.a/255}）`；
}

rgba（0,0,0,0）不是一种颜色，它是完全透明的。在浏览器上它不是白色的，你只是看到背景色，恰巧是白色的。因此我需要某种算法来转换它）我认为你没有抓住重点。rgba颜色中的最后一个值是alpha值，它是0。这意味着它是完全透明的，你无法转换像玻璃窗一样，它是透明的，窗口是什么颜色，这取决于另一面是什么…你称之为“计算样式”是什么？对于这个确切的值，浏览器将有不同的元素CSS输出，通过

getComputedStyle（）

方法检索。一些将输出

“透明”“

，其他

”rgba（0,0,0,0）；“

。根本不清楚你在追求什么，为什么。您的问题是当您执行

canvas.toDataURL（“image/jpeg”）

时，此颜色会转换为不透明黑色吗？那只是因为JPEG不支持alpha通道。要使画布显示不透明（就像导出为JPEG一样），可以请求如下上下文：

canvas.getContext（'2d'，{alpha:false}）

@Blindman67我想保持透明度，因此如果alpha为0.5，我需要为画布进行适当调整。rgba（0,0,0,0）不是颜色，它是完全透明的

// the destination is the pixel being drawn over
var destination = {r : 255, g : 0, b : 0, a : 255}; // red opaque 
// source is the pixel being put on top
var source = {r : 0, g : 255, b : 0, a : 127}; // green about half transparent

// normalised means brought to a unit value ranging between 0-1 inclusive
var ad = destination.a / 255; // normalise the destination alpha
var as = source.a / 255;      // and source

// get the normalised alpha value for the resulting pixel
var ar = as + ad * (1  - as);


// the resulting pixel
var result = {};
// calculate the colour channels.
result.r = (source.r * as  + destination.r * ad * (1 - as)) / ar;
result.g = (source.g * as  + destination.g * ad * (1 - as)) / ar;
result.b = (source.b * as  + destination.b * ad * (1 - as)) / ar;

// calculate the alpha channel
result.a = ar * 255; // bring alpha back to the byte value
                     // Though it may seem silly to convert to 8 bit range
                     // it is important to do so because there is a 
                     // considerable loss of precision in all these 
                     // calculations

// convert to a pixel value a used in 2D context getImageData
var pixel = new Uint8ClampedArray([
    result.r,
    result.g,
    result.b,
    result.a,
]);