HTML5 / Canvas 色の指定


色付で文字や四角を書く場合、fillRect や fillText の前に fillStyle で色を指定できるよ。

1
2
3
4
5
6
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = '#FF0000';
context.fillRect(0, 0, 150, 100);
context.fillStyle = '#0000FF';
context.fillText('Hello World!', 150, 100, 50);

ちなみに文字のサイズを変えたい場合は、font に指定します。
※デフォルトは 10px sans-serif

1
context.font = '30px Helvetica';

sample

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です