Question

我试图在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>

修改实际上我刚刚意识到我忘了在渐变停止中添加Alphas，下面的更改解决了问题：

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

Answer 1

主要问题是渐变停止..

 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）中间半红（.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>

HTML5 Canvas渐变显示为黑色

1 个答案: