gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 10:33:25 27 4
gpt4 key购买 nike

我正在尝试将文本绘制到具有特定 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 ,因为速度是一个主要问题。

最佳答案

此函数会将 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 填充前景文本。

关于javascript - html5 Canvas 填充文本具有特定的 alpha 和背景具有不同的 alpha,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29108950/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com