rgba() 在 HTML5 Canvas 渐变中产生黑色调

Question

我想在 HTML5 Canvas 上绘制三个渐变。但它并没有产生预期的效果。所以我稍微研究了一下，发现 rgba(0, 0, 0, 0) 在 canvas 渐变中使用时并不是完全透明的。相反，它产生了意想不到的黑色调。

在 CSS 中，它工作正常。

如何才能达到与 CSS 相同的效果？（请参阅随附的屏幕截图）

CSS 属性：

background: linear-gradient(rgba(0, 0, 0, 0), rgb(255, 0, 0));

Canvas 属性：

var grad = ctx.createLinearGradient(0, 0, 0, height);
    grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
    grad.addColorStop(1, 'rgb(255, 0, 0)');

Answer 1

确实算法似乎不同。

不太清楚为什么，但我会说 CSS 并不像 canvas 那样将 rgba(0,0,0,0) 视为 透明黑色像素 确实如此，但与 transparent.

一样

2D canvas 将从所有 4 个 RGBA 通道值直接合成，直到下一站的值，而 CSS 似乎将透明理解为一种特殊情况。

要在 canvas 上获得与 CSS 相同的结果，您必须将第一个透明停止设置为下一个，只需更改 alpha 值：

var ctx = c.getContext('2d'),
  grad = ctx.createLinearGradient(0,0,0,150);
grad.addColorStop(0, 'rgba(255,0,0,0)'); // transparent red
grad.addColorStop(1, 'rgba(255,0,0)');
ctx.fillStyle = grad;
ctx.fillRect(0,0,300,150);

#html{
  background: linear-gradient(rgba(0, 0, 0, 0), rgb(255, 0, 0));
  height: 150px;
  width: 300px;
  display: inline-block;
}

<div id="html"></div>
<canvas id="c"></canvas>

rgba() 在 HTML5 Canvas 渐变中产生黑色调

rgba() is producing a blackish tone in HTML5 Canvas Gradient

rgb

rgba

html5-canvas