我的Javascript漸變無法正常工作

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

} 

如果你有興趣