堀北真希うさぎ
主な作品
オリジナルキャラクタのイラスト例とそれを組み込んだアニメーション動画

ページ案内▼

fillStyleプロパティ。

HTML 5で導入される<canvas>要素を操作するために用いるJAVAスクリプトのプロパティのうち、塗り潰す色やスタイルを与えるfillStyleプロパティについての解説です。

fillStyleプロパティ・目次。

fillStyleプロパティとは。

fillStyleプロパティは、塗り潰す色やスタイルを指定するプロパティです。

fillStyleプロパティの対応状況。

<canvas>要素をサポートしているウェブブラウザであれば、全てのブラウザが対応しております。

fillStyleプロパティの値。

fillStyleプロパティの値は、以下のいずれかとなります。

文字列
CSSで記述出来る色に関する値です。
CanvasGradient オブジェクト
グラデーションのパターンのオブジェクトです。
CanvasPattern オブジェクト
キャンヴァスのスタイルパターンのオブジェクトです。

fillStyleプロパティの使用例。

赤い円板を描きます。

    var c=document.getElementById('CANVAS1');
    /* IEだとこれがないと動作しない場合があります */
    if (document.all && !window.opera) {
        c=G_vmlCanvasManager.initElement(c);
        }
    /* ノードが取れたか判定 */
    if (!c || !c.getContext) {
        return(false);
        }

    var ct=c.getContext('2d');

    /* 赤で円板を描く */
    ct.beginPath();                /* 描画開始 */
    ct.fillStyle='#ff0000';        /* 塗り潰しの色を赤に */
    ct.arc(120, 90, 70, 0, Math.PI*2, false);
    ct.fill();                     /* 塗り潰して描く */
}

関連事項。

fillStyleプロパティ
塗り潰す色やスタイルのプロパティ
beginPath()メソッド
描画サブパスを初期化するメソッド
fill()メソッド
描画サブパスを塗り潰すメソッド

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com