JS 中 RGBA 四通道颜色的叠加计算方法

不怕麻烦的鹿丸

于 2023-09-14 17:32:17 发布

阅读量303

点赞数 1

分类专栏： JavaScript HTML5 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_31851435/article/details/132886813

版权

HTML5 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

JavaScript

33 篇文章 0 订阅

订阅专栏

function crCalculateBlend(a1, a2, c1, c2) {
	return (c1 * a1 * (1 - a2) + c2 * a2) / (a1 + a2 - a1 * a2);
}
 
// cor2叠加在cor1上
export function crColorBlend(cor1, cor2) {
	let fAlp1 = cor1[3] / 255;
	let fAlp2 = cor2[3] / 255;
	let fAlpBlend = fAlp1 + fAlp2 - fAlp1 * fAlp2;
	
	let fRed1 = cor1[0] / 255;
	let fRed2 = cor2[0] / 255;
	let fRedBlend = crCalculateBlend(fAlp1, fAlp2, fRed1, fRed2);
	
	let fGreen1 = cor1[1] / 255;
	let fGreen2 = cor2[1] / 255;
	let fGreenBlend = crCalculateBlend(fAlp1, fAlp2, fGreen1, fGreen2);
 
	let fBlue1 = cor1[2] / 255;
	let fBlue2 = cor2[2] / 255;
	let fBlueBlend = crCalculateBlend(fAlp1, fAlp2, fBlue1, fBlue2);
 
	return [
        fRedBlend * 255, 
        fGreenBlend * 255, 
        fBlueBlend * 255, 
        fAlpBlend * 255
    ];
}