html - 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';” 所以圆圈是绿色的，不是红色或黄色。所以也许我忘记了什么..

谢谢！（顺便说一句，我使用 chrome，这种效果在其他东西上效果很好）

Answer 1

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

让渐变完全符合您的要求是另一个问题:)

它现在看起来全是红色，但是如果您更改 x/y 值，您将能够看到渐变。例如：

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

会做的伎俩。

http://jsfiddle.net/3EzUq/

---

我认为您不应该调用 context canvas。我会推荐ctx或context代替。这没什么大不了的，但总有一天你会让合作者感到困惑。