堀北真希うさぎ
主な作品
人気女優をモデルにしたオリジナルキャラクタのイラスト例とそれを組み込んだアニメーション動画

ページ案内▼

strokeStyleプロパティ。

HTML 5で導入される<canvas>要素を操作するために用いるJAVAスクリプトのプロパティのうち、線描画で用いる色やスタイルを与えるstrokeStyleプロパティについての解説です。

strokeStyleプロパティ・目次。

strokeStyleプロパティとは。

strokeStyleプロパティは、線描画で用いる色やスタイルを指定するプロパティです。

strokeStyleプロパティの対応状況。

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

strokeStyleプロパティの値。

strokeStyleプロパティの値は、以下のいずれかとなります。

文字列
CSSで記述出来る色に関する値です。
CanvasGradient オブジェクト
グラデーションのパターンのオブジェクトです。
CanvasPattern オブジェクト
キャンヴァスのスタイルパターンのオブジェクトです。

strokeStyleプロパティの使用例。

赤い円周を描きます。

    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();                   /* 線描画 */
}

関連事項。

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

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

marguerite.site@gmail.com