堀北真希うさぎ
主な作品
アイドルをモデルにしたオリジナルキャラクタのイラスト例とアニメーション動画

ページ案内▼

stroke()メソッド。

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

stroke()メソッド・目次。

stroke()メソッドとは。

stroke()メソッドは、現在のパスにあるサブパスについて各点を順番に繋いで線で描画します。

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

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

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

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

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

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

赤い円周を描きます。

    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.strokeStyle='#ff0000';      /* 線描画の色を赤に */
    ct.arc(120, 90, 70, 0, Math.PI*2, false);
    ct.stroke();                   /* 線描画 */
}

関連事項。

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

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

marguerite.site@gmail.com