パスの描画
Canvasではパスを用いて直線、矩形、二次曲線、ペジェ曲線等の様々な形の図形を描く事ができます。
パスを利用して図形を描画する場合はbeginPath(), closePath(), moveTo(), stroke(), fill()のそれぞれのメソッドを適切に利用する必要があります。
beginPath() - パスの初期化を行う
// パスを初期化する context.beginPath();
closePath() - パスを閉じる
// パスを閉じる context.closePath();
moveTo(x, y) - 指定されたx, y座標で新規パスを生成する
// 10px,10pxの座標で新規パスを生成する context.moveTo(10,10);
srtoke() - 線を描画する
// 線の描画を行う context.stroke();
fill() - 塗り潰す
// 塗り潰し描画を行う context.fill();
パスを作成して図形を描画する際は以下のステップでパスの設定を行います。
尚、fillメソッドを利用する場合は開いているパスが自動的に閉じられる為、closePathメソッドを使う必要はありません。
それでは図形描画の各メソッドを見ていきましょう。
尚、これより先のサンプルコードは予め2dコンテキストが取得済みであることを前提として記載しています。
lineTo(x, y) - 直線の描画
現在のパスより引数で指定しているx座標、y座標に対して直線を引きます。
指定する引数は以下の通りです。
// パスを初期化する context.beginPath(); // 指定からx座標200px、y座標50pxへの直線パスを設定する context.lineTo(200,50); // 描画を実行する context.stroke();
図4: 横幅300px、縦幅250pxのCanvasに描画した場合
arc (x, y, radius, startAngle, endAngle, anticlockwise) - 円弧の描画
引数で指定した位置、角度、方向で円弧を描画します。
指定する引数は以下の通りです。
// パスを初期化する context.beginPath(); // 円を描画する context.arc(50, 50, 40, 0, 10*Math.PI/180, 120*Math.PI/180, true); // 描画を実行する context.stroke();
図5: 横幅300px、縦幅250pxのCanvasに描画した場合
quadraticCurveTo (cpx, cpy, x, y) - 二次ベジェ曲線を描画する
現在のパスに対してcpx,cpyで設定した制御点を伴う二次ペジェ曲線を描画します。
指定する引数は以下の通りです。
// パスを初期化する context.beginPath(); // 円を描画する context.quadraticCurveTo(50, 100, 100, 0); // 描画を実行する context.stroke();
図6: 横幅300px、縦幅250pxのCanvasに描画した場合
bezireCurveTo(cpx, cpy, cp2x, cp2y, x, y) - 三次ベジェ曲線を描画する
現在のパスに対して（cpx, cpy）と(cpx2, cpy2)で設定した制御点を伴う三次ベジェ曲線を描画します。
指定する引数は以下の通りです。
// パスを初期化する context.beginPath(); // 円を描画する context.bezierCurveTo(30, 90, 70, 90, 90, 10); // 描画を実行する context.stroke();
図7: 横幅300px、縦幅250pxのCanvasに描画した場合
プロパティの設定
2dコンテキストのプロパティによりCanvasに描画する図形の色や線のスタイル等の図形の装飾が可能となっています。
以下に代表的なプロパティと設定方法を記載します。
fillStyle - 図形の塗り潰し色
fillStyleプロパティにより、描画した図形の塗り潰し色を設定することができます。
カラー名、カラーコード、rgb、rgbaによる指定が可能です。
context.fillStyle = "black"; context.fillStyle = "#000000"; context.fillStyle = "rgb(0,0,0)"; context.fillStyle = "rgba(0,0,0,1)";
strokeStyle - 図形輪郭の色
strokeStyleプロパティにより、描画した図形の輪郭の色を設定することができます。
設定方法はfillStyleプロパティと同様です。
context.strokeStyle = "black"; context.strokeStyle = "#000000"; context.strokeStyle = "rgb(0,0,0)"; context.strokeStyle = "rgba(0,0,0,1)";
lineWidth - 線の太さ
lineWidthプロパティを変更することで線の太さの設定が行えます。標準では1.0に設定されています。また、この値は正数のみ設定可能となります。
context.lineWidth = 10;
lineCap - 線の終点
線の終点の種類を変えるにはlineCapプロパティの設定を変更することで対応可能です。lineCapはbutt、round、squareの3つのオプションから設定できます。
各オプションの詳細は以下の通りです。
context.lineCap = "round";
lineJoin - 図形においての線の接続
lineJoinプロパティで図形においての線が互いにどのように接続するか設定することができます。lineJoinはround, bavel, miterの3つのオプションから設定できます。
各オプションの詳細は以下の通りです。
context.lineJoin = "round";
shadowColor - 影の色
shadowColorプロパティで図形に追加する影の色をrgbで設定します。
context.shadowColor = "black"; context.shadowColor = "#000000"; context.shadowColor = "rgb(0,0,0)"; context.shadowColor = "rgba(0,0,0,1)";
shadowOffsetX - 影の水平方向オフセット値
影の水平方向Offset値はshadowOffsetプロパティにて設定します。初期値は0となります。
context.shadowOffsetX = 10;
shadowOffsetY - 影の垂直方向オフセット値
shasowOddsetXと同様に、影の垂直方向Offset値はshadowOffsetプロパティにて設定します。初期値は0となります。
context.shadowOffsetY = 10;
shadowBlur - 影のぼかしレベル
shadowBlurプロパティにて影のぼかし効果レベルの設定が行えます。初期値は0であり、数値を大きくする程ぼかしレベルも大きくなります。
context.shadowBlur = 5;
第1章 |  |
第2章 | |
第3章 | |
第4章 | |
