0

我目前正在使用 Javascript 和 HTML 画布元素编写交互式应用程序。我正在编码的一件事是不透明度渐变。我的渐变应该从透明渐变到部分不透明,但我定义为创建渐变的位置的整个区域只是部分不透明,不会从透明中渐变。这是我的代码:

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

}
4

1 回答 1

0

它与您在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

于 2012-06-01T00:55:05.230 回答