HTML5 canvas线性渐变对我来说不起作用

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。这不是什么大问题，但有一天你会混淆合作者。