Question

我目前正在使用Javascript和HTML canvas元素编写交互式应用程序。我正在编码的一件事是不透明度渐变。我的渐变应该从透明渐变到部分不透明，但我定义为创建渐变的地方的整个区域只是部分不透明，没有透明度的淡化。这是我的代码：

function draw() {

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var grd = ctx.createLinearGradient(0, 1000, 0, 0);

grd.addColorStop(0.5, "rgba(255, 255, 255, 0.5)");
grd.addColorStop(1, "rgba(255, 255, 255, 0)");
ctx.fillStyle = grd;
ctx.fillRect(0, 660, 1000, 10);

}

Answer 1

它与您在createLinearGradient和fillRect中使用的尺寸有关。现在，您将渐变区域定义为一个非常高的薄矩形[（0,0）到（0,1000）]。但是，然后将渐变矩形绘制为一个相当大的矩形[（0,660）到（1000,10）]。

我不确定您想要的输出是什么样的，但似乎您的ctx.fillRect行是错误的。尝试以下工作：

function draw() {

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var grd = ctx.createLinearGradient(0, 1000, 0, 0);

  grd.addColorStop(0.5, "rgba(255, 255, 255, 0.5)");
  grd.addColorStop(1, "rgba(255, 255, 255, 0)");
  ctx.fillStyle = grd;
  ctx.fillRect(0, 10, 1000, 660);

}

jsFiddle如果您有兴趣

我的Javascript渐变无法正常工作

1 个答案: