APIではグラデーションや背景パターンといったスタイルの適用も可能です。ここからはそうした描画スタイルの指定方法について解説していきます。線形グラデーション線形グラデーションを適用した描画を行う際は、まずcreateLinearGradient()メソッドでCanvasGradientオブジェクトを生成します。y1)をつなぐ線分に沿って色が変化します。実際のグラデーションの色は、CanvasGradientオブジェクトのaddColorStop()メソッドで指定します。addColorStop()メソッドoffsetは色を割り当てる位置で、グラディエントベクトルの始点を0.0、終点を1.0とする数値で指定します。colorはCSS形式の色指定です。色は始点、終点だけでなく、任意の数を追加できます。作成したCanvasGradientオブジェクトは、fillStyle/strokeStyle属性に直接代入することで適用できます。以下に使用例を示します。円形グラデーション円形グラデーションの場合は、createRadialGradient()メソッドを使用してCanvasGradientオブジェクトを生成します。y1)、半径r1の終了円に向かって色が変化していきます。終了円の外側は終了色で塗りつぶされます。その他の使い方は線形グラデーションと同じです。パターン画像パターンを描画に使用する場合は、createPattern()メソッドでCanvasPatternオブジェクトを生成します。canvasのDOMオブジェクトが指定できます。drawImage()と同様に読み込みが完了していなければならない点に注意してください。repetitionは画像パターンの繰り返し方法で、“repeat”(縦横ともにリピート)、“repeat-x”(横方向のみリピート)、“repeat-y”(縦方向のみリピート)、“no-repeat”(リピートしない)のいずれかを文字列で指定します。省略時のデフォルトは"repeat"です。CanvasPatternオブジェクトはCanvasGradientと同様にfillStyle/strokeStyleに代入することで適用できます。以下に使用例を示します。線のスタイル輪郭線を描画する際のスタイルも、前々回で解説したSVGにならう形で設定できます。線幅は描画コンテキストのlineWidth属性で設定できます。実際のサンプルを見る端点のスタイルはlineCap属性で設定します。指定できる値はSVGと同じで、“butt”(単純にぶつ切り)、“round”(丸くする)、“square”(線幅の半分だけ長さを延長してぶつ切り)です。実際のサンプルを見る接続点のスタイルはlineJoin属性で設定します。指定できる値は"miter"(尖らせる)、“round”(丸く面取り)、“bevel”(面取り)です。miter設定時は、bevelに切り替わるしきい値をmiterLimit属性で指定できます。機能はSVGのstroke-linejoint属性と同じなので、そちらの説明を参照してください。よる描画を行う際は、描画コンテキストのglobalAlpha属性にアルファ値を指定します。指定できる値の範囲は0.0(完全透明)〜1.0(不透明)です。実際のサンプルを見るまた、fillStyleやstrokeStyle、addColorStop()メソッドに渡すCSSカラーにアルファ値を含める方法もあります。実際のサンプルを見るただし、CSSカラーによる指定はdrawImage()メソッドやパターンを使った描画には適用できません。場合によって2つの方法を使い分けてください。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。