HTML5新機能 〜 canvas要素でグラデーション

グラデーション機能を試してみた。

グラデーションを付ける部分のコードは下記。

$gradientId.click(function(){
 grad = ct.createLinearGradient(20,20,180,180);
 grad.addColorStop(0, 'rgb(255,0,0)');
 grad.addColorStop(0.5, 'rgb(0,255,0)');
 grad.addColorStop(1, 'rgb(0,0,255)');

 //グラデーションを図形に適用する
 ct.fillStyle = grad;
 ct.fill();
});