javascript - html5 Canvas 填充文本具有特定的 alpha 和背景具有不同的 alpha

Question

我正在尝试将文本绘制到具有特定 Alpha 级别的 Canvas 上，并剪辑文本并使用其自己的 Alpha 级别绘制背景颜色:

ctx.globalCompositeOperation = '...';
    ctx.fillStyle = 'rgba(' + fgcolor.r + ', ' +  fgcolor.g + ', ' + fgcolor.b + ',' + (fgcolor.a / 255.0) + ')';
       ctx.fillText(String.fromCharCode(chr), x,y);
ctx.globalCompositeOperation = '...';
    ctx.fillStyle = 'rgba(' + bgcolor.r + ', ' +  bgcolor.g + ', ' + bgcolor.b + ',' + (bgcolor.a / 255.0) + ')';
    ctx.fillRect(x, y, chr_width, chr_height);

我尝试使用 globalCompositeOperation 和 beginPath 但无法达到预期的结果。我还想避免使用drawImage和离屏 Canvas ，因为速度是一个主要问题。

Answer 1

此函数会将 RGBA 颜色转换为 RGB:

function RGBAtoRGB(r, g, b, a, backgroundR,backgroundG,backgroundB){
  var r3 = Math.round(((1 - a) * backgroundR) + (a * r))
  var g3 = Math.round(((1 - a) * backgroundG) + (a * g))
  var b3 = Math.round(((1 - a) * backgroundB) + (a * b))
  return "rgb("+r3+","+g3+","+b3+")";
}  

1. 将背景RGBA转换为RGB并用RGB填充背景。

2. 将前景 RGBA 转换为 RGB，并用 RGB 填充前景文本。