2

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';」があります。したがって、円は赤や黄色ではなく、緑です。だから多分私は何かを忘れました。

ありがとう！（ところで、私はクロムを使用し、この効果は他のものでうまく機能します）

4

1 に答える 1

5

canvas.fillStyle = grad;、ではありませんgrad.fillStyle = grad;！

グラデーションを正確にあなたが望むことをするようにすることは別の問題です:)

現在はすべて赤に見えますが、x / y値を変更すると、グラデーションが表示されます。例えば：

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

トリックを行います。

http://jsfiddle.net/3EzUq/

私はあなたが文脈を呼ぶべきではないと思いますcanvas。ctxまたはcontext代わりにお勧めします。大したことではありませんが、いつか共同作業者を混乱させるでしょう。

于 2012-04-25T16:05:11.447 に答える