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。这不是什么大不了的事，但总有一天你会迷惑合作者。