堀北真希うさぎ
主な作品
堀北真希うさぎ：昔のボシュロム製コンタクトレンズ『オプティマ』のTVCMを真似てコンタクトレンズを入れる場面を含んだ仮想CM動画

ページ案内▼

fill()メソッド。

HTML 5で導入される<canvas>要素を操作するために用いるJAVAスクリプトのメソッドのうち、サブパスを塗り潰して描画するfill()メソッドについての解説です。

fill()メソッド・目次。

fill()メソッドとは。

fill()メソッドは、現在のパスにあるサブパスについて各点を順番に繋いで描画したうえで内部を塗り潰します。

描画に用いられる色やスタイルは、fillStyleプロパティで指定されたものとなります。

尚、サブパスが閉じられてない場合、終点から起点まで線を引いてを閉じたものとして塗り潰しを行います。

fill()メソッドの対応状況。

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

fill()メソッドの引数と戻り値。

fill()メソッドには、引数も戻り値もありません。

fill()メソッドの使用例。

赤い円板を描きます。

    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()メソッド
描画サブパスを初期化するメソッド
stroke()メソッド
描画サブパスを線描画するメソッド

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

marguerite.site@gmail.com