HTML5畫布線性漸變不工作對我來說

Question

我有一個問題，而試圖用createLinearGradient

//linear gradient 
canvas.beginPath(); 
canvas.arc(350,400,100,0,2*Math.PI,false); 
canvas.strokeStyle = 'lightblue'; 

var grad = canvas.createLinearGradient(350,110,100,0); //(x0,y0) to (x1,y1) 
grad.addColorStop(0,'red'); 
grad.addColorStop(1,'yellow'); 
grad.fillStyle = grad; 
canvas.fill(); 
canvas.stroke(); 

的問題是，在圓的線性漸變不起作用。這個圓圈本身表現得很好......

之前，我有代碼「canvas.fillStyle ='green';」所以圓是綠色的，不是紅色或黃色。所以也許我忘了一些東西..

謝謝！ （順便說一句，我用鉻和這種效果在其他東西上工作正常）

Answer 1

canvas.fillStyle = grad;，而不是grad.fillStyle = grad;！

獲取梯度做的正是你想要的是另一個問題:)

它現在看起來都紅了，但如果你改變了x/y值你可以看到漸變。例如：

var grad = canvas.createLinearGradient(350,110,100,330);

會做的伎倆。

http://jsfiddle.net/3EzUq/

---

我不認爲你應該叫上下文canvas。我建議您改用ctx或context。這不是什麼大不了的事，但總有一天你會迷惑合作者。