堀北真希うさぎ
主な作品
堀北真希ちゃんがボシュロム社TVコマーシャルに出演した事にちなんだ、ソフトコンタクトを入れる堀北真希うさぎのイラストと仮想CM動画

ページ案内▼

fillRect()メソッド。

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

fillRect()メソッド・目次。

fillRect()メソッドとは。

fillRect()メソッドは、長方形を塗り潰して描画します。

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

尚、fillRect()メソッドに於ける処理はパスと無関係に行われます。従って、事前にbeginPath()メソッドを呼ぶ必要もなければ、描画の際にfill()メソッドを実行させる必要もありません。

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

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

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

fillRect()メソッドには、以下の四つの引数があります。

  1. 左上のx座標…キャンヴァスの左端が 0になります。
  2. 左上のy座標…キャンヴァスの上端が 0になります。
  3. 横幅
  4. 高さ

いずれもピクセル単位です。

尚、横幅または高さが零の場合には何もしません。

また、fillRect()メソッドには戻り値はありません。

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

キャンヴァスを象牙色でクリアします。

    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');

    /* 象牙色でクリア */
    var w,h;  /* 先ず、キャンヴァスの幅と高さを得る */
    if (!(w=c.style.pixelWidth)) {
        var s=document.defaultView.getComputedStyle(c, '');
        w=parseInt(s.width);
        h=parseInt(s.height);
        }
    else h=c.style.pixelHeight;

    ct.fillStyle='#ffffee';
    ct.fillRect(0, 0, w, h);

    (以下、処理が続く)

}

関連事項。

fillStyleプロパティ
塗り潰す色やスタイルのプロパティ
fill()メソッド
描画サブパスを塗り潰すメソッド
strokeRect()メソッド
長方形を線描画するメソッド

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

marguerite.site@gmail.com