如何在画布中缩放alpha值？
如何在画布中缩放alpha值？
提问于 2013-10-16 19:58:10
在画布中缩放alpha值的最佳方法是什么？
我试图解决的第一个问题是绘制一个具有内在低alpha值的sprite。我想把它画得比它实际亮3-4倍。目前，我只是在同一地点画了4次。(我不能编辑图像文件，globalAlpha不会超过1)
我试图解决的第二个问题是绘制多个重叠精灵的边界。这些精灵是圆形的，但有一些杂乱的东西。我想我应该使用这种方法和globalCompositeOperation = 'destination-out'相结合，但是为此，我需要最大化第二张图的alpha值。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-10-16 23:54:23
作为马克答案的一种选择-你可以直接放大alpha通道。
我只建议将此方法作为预处理阶段的一部分，而不是每次需要使用sprite作为迭代缓冲区时使用，这种方式是一个相对较慢的过程。
现场演示
假设您已经在画布中拥有了雪碧，并且知道它的位置：
/// get the image data and cache its pixel buffer and length
var imageData = context.getImageData(x, y, width, height);
var data = imageData.data;
var length = data.length;
var i = 0;
var scale = 4; /// scale values 4 times. This may be a fractional value
/// scale only alpha channel
for(; i < length; i += 4) {
data[i + 3] *= scale;
}
context.putImageData(imageData, x, y);Uint8ClampedArray的好处是画布使用夹子并为您舍入值，所以您不需要检查下界或上界，也不需要将值转换为整数--内部代码为您完成了所有这些工作。
Stack Overflow用户
发布于 2013-10-16 20:51:31
您可以通过将rgba压平到rgb，然后增加rgb组件值来“亮”rgba颜色。
- 将rgba值转换为rgb，并使背景颜色生效。
- 将生成的红色、绿色、蓝色值增加一个百分比，使颜色“变亮”。
下面是一个这样的函数(免责声明:这里未经测试的代码！)
function brighten(RGBA,bg,pct){
// convert rgba to rgb
alpha = 1 - RGBA.alpha/255;
red = Math.round((RGBA.alpha*(RGBA.red/255)+(alpha*(bg.red/255)))*255);
green = Math.round((RGBA.alpha*(RGBA.green/255)+(alpha*(bg.green/255)))*255);
blue = Math.round((RGBA.alpha*(RGBA.blue/255)+(alpha*(bg.blue/255)))*255);
// brighten the flattened rgb by a percentage (100 will leave the rgb unaltered)
redBright=parseInt( Math.min(255,red*pct/100) );
greenBright=parseInt( Math.min(255,green*pct/100) );
blueBright=parseInt( Math.min(255,blue*pct/100) );
return({red:redBright,green:greenBright,blue:blueBright});
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19412609
复制相关文章
相似问题
腾讯云开发者
