Html5 canvas rgba（）在HTML5画布渐变中产生黑色色调

我想在HTML5画布上绘制三个渐变。但这并没有产生预期的效果。所以我深入研究了一下，发现rgba0，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)');

画布属性：

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

---

实际上，算法似乎有所不同

不太清楚为什么，但是我认为CSS不把RGBA0，0，0，0看作是像Cuvas那样透明的黑色像素，而是透明的。 2D画布将直接从所有4个RGBA通道值合成，直到下一站的值，而CSS one似乎将透明理解为一种特殊情况

要获得与画布上的CSS相同的结果，只需更改alpha值即可将第一个透明停止设置为下一个：

var ctx=c.getContext'2d'， 梯度=ctx.createLinearGradient0,0,0150； grad.addColorStop0，'rgba255,0,0,0'；//透明红 grad.addColorStop1，'rgba255,0,0'； ctx.fillStyle=梯度； ctx.fillRect0,0300150； html{ 背景：线性梯度RGBA0，0，0，0，rgb255，0，0； 高度：150像素； 宽度：300px； 显示：内联块； }