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改为.这不是什么大问题,但有一天你会让合作者感到困惑.