2012年03月01日

canvasで色を変更

canvasコンテキストには色を制御するfillStyleプロパティとstrokeStyleプロパティが用意されています。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(155, 187, 89)';
ctx.fillRect(25,25,100,100);
ctx.strokeStyle = '#ff0000';
ctx.strokeRect(225,225,100,100);


それぞれ、プロパティに値を設定後fillRectやstrokeRectメソッドで描画したオブジェクトに色が反映されています。色にはCSSと同じ値がりようできます。

サンプル

HTML5 canvas 入門一覧
posted by ねこまんま at 08:44 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/254889027
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック