如何在画布中缩放alpha值？

Question

在画布中缩放Alpha值的最佳方法是什么？

我要解决的第一个问题是绘制一个具有内在低alpha值的精灵。我想把它画得比实际亮3-4倍。目前我只是在同一个地方画了4次。 （我无法编辑图像文件，而globalAlpha不会超过1）

我想解决的第二个问题是绘制多个重叠精灵的边界。精灵是圆形的但有波浪形。我想我会将this method与globalCompositeOperation = 'destination-out'结合使用，但为此我需要最大化第二张图的alpha值。

Answer 1

您可以通过将rgb颜色展平为rgb来“亮化”rgba颜色，然后增加rgb组件值。

• 将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});

}    

Answer 2

作为markE答案的一个选项 - 您可以直接缩放Alpha通道。

我只推荐这种方法作为预处理阶段的一部分，而不是每次需要使用精灵时都使用，因为这种方式迭代缓冲是一个相对缓慢的过程。

<强> LIVE DEMO HERE

假设你已经在画布中有精灵并且知道它的位置：

/// 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的好处是为你设置钳位和舍入值，所以你不需要检查下限或上限，也不需要将值转换为整数 - 内部代码执行所有这些操作 你。