HTML5帆布渐变显示为黑色

我试图在HTML5画布中重现以下背景图像，但是在浏览器上呈现的是黑色框。原始图像是在illustrator中制作的，这就是我从中获取坐标的地方（实际使用的是一个导出插件）。HTML5帆布渐变显示为黑色

<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>index</title> 
    <script> 

    function init() { 

     var canvas = document.getElementById("canvas"); 
     var ctx = canvas.getContext("2d"); 

     draw(ctx); 
    } 

    function draw(ctx) { 

     var gradient; 

     // layer1/Red Background Bottom 
     ctx.save(); 
     ctx.beginPath(); 
     ctx.moveTo(1036.0, 789.7); 
     ctx.lineTo(12.0, 789.7); 
     ctx.lineTo(12.0, 21.7); 
     ctx.lineTo(1036.0, 21.7); 
     ctx.lineTo(1036.0, 789.7); 
     ctx.closePath(); 
     ctx.fillStyle = "rgb(235, 10, 10)"; 
     ctx.fill(); 

     // layer1/Shadow Bottom 
     ctx.beginPath(); 
     ctx.moveTo(1036.0, 788.7); 
     ctx.lineTo(12.0, 788.7); 
     ctx.lineTo(12.0, 20.7); 
     ctx.lineTo(1036.0, 20.7); 
     ctx.lineTo(1036.0, 788.7); 
     ctx.closePath(); 
     ctx.save(); 
     ctx.transform(3.200, 0.000, 0.000, -4.206, 196.6, -5329.4); 
     gradient = ctx.createRadialGradient(96.7, -1580.0, 0.0, 96.7, -1580.0, 161.7); 
     gradient.addColorStop(0.00, "rgb(0, 0, 0)"); 
     gradient.addColorStop(0.55, "rgb(0, 0, 0)"); 
     gradient.addColorStop(1.00, "rgb(0, 0, 0)"); 
     ctx.fillStyle = gradient; 
     ctx.fill(); 
     ctx.restore(); 
     ctx.restore(); 
    } 
    </script> 
</head> 
<body onload="init()"> 
    <canvas id="canvas" width="1049" height="792"></canvas> 
</body> 
</html>

编辑： 其实我才意识到，我忘了加上阿尔法在渐变停点，下面的改变解决了这个问题：

 gradient.addColorStop(0.00, "rgba(0, 0, 0,0)"); 
     gradient.addColorStop(1.00, "rgba(0, 0, 0, 0.5)");

来源

2016-01-07 DTs

的主要问题是梯度停止..

gradient.addColorStop(0.00, "rgb(0, 0, 0)"); 
gradient.addColorStop(0.55, "rgb(0, 0, 0)"); 
gradient.addColorStop(1.00, "rgb(0, 0, 0)");

它们都是黑色（红色0，绿色0，蓝色0）。更改值...

gradient.addColorStop(0.00, "rgb(255, 0, 0)"); 
gradient.addColorStop(0.55, "rgb(125, 0, 0)"); 
gradient.addColorStop(1.00, "rgb(0, 0, 0)");

使您能够在中心（0）全红（红255，绿0，蓝0）半红在中央（4.55）（红色125，绿0，蓝0）边缘（1.00）（红色0，绿色0，蓝色0）没有红色（黑色）

然后你只需要改变你的渐变的中心点。

function init() { 
 
    var canvas = document.getElementById("canvas"); 
 
    var ctx = canvas.getContext("2d"); 
 

 
    draw(ctx); 
 
} 
 

 
function draw(ctx) { 
 
    var gradient; 
 

 
    // layer1/Red Background Bottom 
 
    ctx.save(); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(1036.0, 789.7); 
 
    ctx.lineTo(12.0, 789.7); 
 
    ctx.lineTo(12.0, 21.7); 
 
    ctx.lineTo(1036.0, 21.7); 
 
    ctx.lineTo(1036.0, 789.7); 
 
    ctx.closePath(); 
 
    ctx.fillStyle = "rgb(235, 10, 10)"; 
 
    ctx.fill(); 
 

 
    // layer1/Shadow Bottom 
 
    ctx.beginPath(); 
 
    ctx.moveTo(1036.0, 788.7); 
 
    ctx.lineTo(12.0, 788.7); 
 
    ctx.lineTo(12.0, 20.7); 
 
    ctx.lineTo(1036.0, 20.7); 
 
    ctx.lineTo(1036.0, 788.7); 
 
    ctx.closePath(); 
 
    ctx.save(); 
 
    ctx.transform(3.200, 0.000, 0.000, -4.206, 196.6, -5329.4); 
 
    gradient = ctx.createRadialGradient(96.7, -1380.0, 0.0, 96.7, -1580.0, 261.7); 
 
    gradient.addColorStop(0.00, "rgb(250, 0, 0)"); 
 
    gradient.addColorStop(0.55, "rgb(125, 0, 0)"); 
 
    gradient.addColorStop(1.00, "rgb(50, 0, 0)"); 
 
    ctx.fillStyle = gradient; 
 
    ctx.fill(); 
 
    ctx.restore(); 
 
    ctx.restore(); 
 
}

<body onload="init()"> 
 
    <canvas id="canvas" width="1049" height="792"></canvas> 
 
</body>

来源

2016-01-07 16:52:17 MarkNHopgood

注意，在我的代码，我也画一个红色矩形正下方的梯度矩形。所有的渐变色都是黑色的，但它们的Alpha从0变为1（这是一个径向灰度透明度）。所以渐变渐变透明部分下面的红色应该是可见的。实际上，这些完全相同的渐变停止在Illustrator中生成原始文章中的图像。将它们更改为此处提出的值，会产生与所需图像不同的结果。 – DTs

其实我只是意识到我忘了指定阿尔法，例如最后一个渐变停止变成'gradient.addColorStop（1.00，“rgba（0，0，0，51）”）;' – DTs

HTML5帆布渐变显示为黑色

回答

相关问题