0

私は現在、Javascript と HTML キャンバス要素を使用してインタラクティブなアプリケーションをコーディングしています。私がコーディングしていることの 1 つは、不透明度のグラデーションです。私のグラデーションは、透明から部分的に不透明にフェードするはずですが、グラデーションを作成する場所として定義した領域全体は、透明からフェードせずに部分的に不透明です。これが私のコードです：

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 に答える