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

ページ案内▼

strokeRect()メソッド。

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

strokeRect()メソッド・目次。

strokeRect()メソッドとは。

strokeRect()メソッドは、長方形を線描画します。

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

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

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

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

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

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

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

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

尚、横幅, 高さがともに零の場合には何もしません。どちらかだけが零の場合は(結果的に)直線となります。

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

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

キャンヴァスに黒枠を付けます。

    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='#ffffff';
    ct.fillRect(0, 0, w, h);

    /* 黒枠をつける */
    ct.strokeStyle='#000000';
    ct.strokeRect(0, 0, w, h);

    (以下、処理が続く)

}

関連事項。

strokeStyleプロパティ
線描画の色やスタイルのプロパティ
fillRect()メソッド
塗り潰した長方形を描くメソッド
stroke()メソッド
描画サブパスを線描画するメソッド

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

marguerite.site@gmail.com