rgba（）在HTML5 Canvas Gradient中产生黑色调

Question

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

在CSS中，它可以正常工作。

如何在CSS中使用相同的效果？ （请参见随附的截图）

CSS属性：

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

画布属性：

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)视为透明黑色像素，而是像一样透明

2D画布将直接从所有4个RGBA通道值合成，直到下一个停止，而CSS似乎理解透明为特定情况。

要在画布上获得与CSS相同的结果，您只需更改Alpha值，就必须将第一个透明停靠点设置为下一个：

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;