堀北真希うさぎ
主な作品
堀北真希ちゃんがボシュロム社コンタクト用品コマーシャルに出演した事に因んだ、堀北真希うさぎのレンズの仮想CM動画

ページ案内▼

closePath()メソッド。

HTML 5で導入される<canvas>要素を操作するために用いるJAVAスクリプトのメソッドのうち、現在点から起点まで直線での描画を指定するclosePath()メソッドについての解説です。

closePath()メソッド・目次。

closePath()メソッドとは。

closePath()メソッドは、現在の座標から起点まで直線を引く事を指定するメソッドです。

より正確に言えば、現在のサブパスから起点に直線を引く事を指定して、起点の座標をサブパスに追加すると言うものです。

ここで言う起点は初めにmoveTo()メソッドで指定された点です。

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

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

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

closePath()メソッドには引数, 戻り値ともありません。

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

赤い円周を描いた後、青で三角形を描きます。

    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();                   /* 線で描く */

    /* 青で三角を描く */
    ct.beginPath();                /* 描画開始 */
    ct.strokeStyle='#0000ff';      /* 線の色を青に */
    ct.moveTo(120, 10);
    ct.lineTo(200, 150);
    ct.lineTo(40, 150);
    ct.closePath();
    ct.stroke();                   /* 線で描く */
}

関連事項。

arc()メソッド
円弧の描画を指定するメソッド
beginPath()メソッド
描画サブパスを初期化するメソッド
lineTo()メソッド
直線描画を指定するメソッド
moveTo()メソッド
新たなサブパスの起点を指定するメソッド

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

marguerite.site@gmail.com