２Ｄ描画について（Canvas 2D Context）
| ・ | Canvas 2D Context について |
| ・ | 全体的な描画設定について |
| ・ | 線の描画スタイルについて |
| ・ | 面の描画スタイルについて |
| ・ | 塗りの設定について |
| ・ | 描画姿勢の設定について |
| ・ | 描画した物をすべてクリアする |
| ・ | 描画パスについて |
| ・ | サブパスを使って線を描画する |
| ・ | サブパスで囲んで面を描画する |
| ・ | 図形を描画する |
| ・ | テキストを描画する |
| ・ | イメージを描画する |
Canvas 2D Context について
■Canvas 2D Context について
HTML5 世代の機能です。
http://www.w3.org/TR/2dcontext/ (Level 1)
http://www.w3.org/TR/2dcontext2/ (Level 2) (Working Draft)
<CANVAS> 要素に、２Ｄの描画を行う事ができます。
■ CanvasRenderingContext2D オブジェクトを取得する
HTMLCanvasElement.getContext ( "2d" ) :CanvasRenderingContext2D
| 第01引数 | String | ここでは、"2d" という文字列を指定。 |
| 戻り値 | CanvasRenderingContext2D | CanvasRenderingContext2D オブジェクトが得られる |
<CANVAS> 要素から、CanvasRenderingContext2D オブジェクトを取得する
<html>
<body>
<canvas id="aaa" width="640" height="480" ></canvas>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "aaa" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var canvas = document.getElementById("aaa");
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 出力テスト
// ------------------------------------------------------------
console.log(canvas);
console.log(context);
//-->
</script>
</body>
</html>
全体的な描画設定について
■透明度を設定する
globalAlpha プロパティを使用します。
0.0 ～ 1.0 の数値を指定します。
デフォルトは、1.0 です。
■使用例
透明度を設定する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 透明度を設定する
// ------------------------------------------------------------
context.globalAlpha = 0.5;
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 20.0;
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(255,255,0,1.0)";
// ------------------------------------------------------------
// 面の描画スタイルを設定する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(255,0,0,1.0)";
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
// 面を描画する
context.fillRect ( 20 , 20 , 260 , 110 );
// 線を描画する
context.strokeRect( 20 , 20 , 260 , 110 );
■合成モード（コンポジット）を設定する
globalCompositeOperation プロパティを使用します。
デフォルトは、"source-over" です。
以下の文字列を指定します。
■合成モード（コンポジット）の種類
Ａ(source) は、新たに描き込むグラフィックです。
Ｂ(destination) は、これまでに描画されたグラフィックです。
| 文字列 | 解説 |
| "source-over" | Ｂに対して、Ａで上書きする |
| "destination-over" | Ａに対して、Ｂで上書きする |
| "source-in" | Ｂの透過チャンネルを、Ａに乗算する（Ａのみ出力） |
| "destination-in" | Ａの透過チャンネルを、Ｂに乗算する（Ｂのみ出力） |
| "source-out" | Ｂの透過チャンネルを反転し、Ａに乗算する（Ａのみ出力） |
| "destination-out" | Ａの透過チャンネルを反転し、Ｂに乗算する（Ｂのみ出力） |
| "source-atop" | Ｂに対して、「 "source-in" の結果」で上書きする |
| "destination-atop" | Ａに対して、「 "destination-in" の結果」で上書きする |
| "lighter" | ＡとＢを加算合成する |
| "xor" | ＡとＢを XOR 合成する |
| "copy" | Ａのみ出力する（Ｂは無視） |
■ブレンドモードの種類（Level2 以降）
| 文字列 | 解説 |
| "normal" | 標準 |
| "multiply" | 乗算 |
| "screen" | スクリーン |
| "overlay" | オーバーレイ |
| "darken" | 比較（暗） |
| "lighten" | 比較（明） |
| "color-dodge" | 覆い焼きカラー |
| "color-burn" | 焼き込みカラー |
| "hard-light" | ハードライト |
| "soft-light" | ソフトライト |
| "difference" | 差の絶対値 |
| "exclusion" | 除外 |
| 文字列 | 解説 |
| "hue" | 色相 |
| "saturation" | 彩度 |
| "color" | カラー |
| "luminosity" | 輝度 |
■使用例
合成モード（コンポジット）を設定する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 400;
canvas.height = 400;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
(function(){
// ------------------------------------------------------------
// 線の太さを設定する
// ------------------------------------------------------------
context.lineWidth = 20.0;
// ------------------------------------------------------------
// 線の塗りを設定する（グラデーション塗り）
// ------------------------------------------------------------
context.strokeStyle = (function(){
var gradient = context.createLinearGradient( 10 , 10 , (canvas.width - 10) , (canvas.height - 10) );
gradient.addColorStop( 0.0 , "rgba(255 , 0 , 0 , 0.0)" );
gradient.addColorStop( 0.2 , "rgba(255 , 255 , 0 , 0.2)" );
gradient.addColorStop( 0.4 , "rgba( 0 , 255 , 0 , 0.4)" );
gradient.addColorStop( 0.6 , "rgba( 0 , 255 , 255 , 0.6)" );
gradient.addColorStop( 0.8 , "rgba( 0 , 0 , 255 , 0.8)" );
gradient.addColorStop( 1.0 , "rgba(255 , 0 , 255 , 1.0)" );
return gradient;
})();
// ------------------------------------------------------------
// 線を描画
// ------------------------------------------------------------
context.beginPath();
var y = 0;
var w = canvas.width;
var h = canvas.height;
for(y = 10 ; y < h ; y += 30){
context.moveTo ( 0 , y );
context.lineTo ( w , y );
}
context.stroke();
})();
// ------------------------------------------------------------
// 合成モード（コンポジット）を設定する
// ------------------------------------------------------------
context.globalCompositeOperation = "source-over";
//context.globalCompositeOperation = "source-in";
//context.globalCompositeOperation = "source-out";
//context.globalCompositeOperation = "source-atop";
//context.globalCompositeOperation = "destination-over";
//context.globalCompositeOperation = "destination-in";
//context.globalCompositeOperation = "destination-out";
//context.globalCompositeOperation = "destination-atop";
(function(){
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
// ------------------------------------------------------------
context.fillStyle = "rgba(128,128,128,0.5)";
// ------------------------------------------------------------
// 円を描画
// ------------------------------------------------------------
context.beginPath();
context.arc(200 , 200 , 150 , 0 , (Math.PI * 2));
context.fill();
})();
線の描画スタイルについて
■線の描画スタイルの一覧
■プロパティ
| プロパティ名 | 型 | 説明 |
| strokeStyle | String CanvasGradient CanvasPattern | 線の塗りを設定する（単一色、グラデーション、テクスチャ） |
| プロパティ名 | 型 | 説明 |
| lineWidth | Number | 線の太さを設定する |
| lineCap | String | 線先の種類を設定する |
| lineJoin | String | 角の種類を設定する |
| miterLimit | Number | マイターの尖りの延長サイズを指定 |
| lineDashOffset | Number | 破線のオフセット値を指定 |
■メソッド
| メソッド | 説明 |
| getLineDash() | 破線の間隔リストを取得 |
| setLineDash() | 破線の間隔リストを指定 |
■線の塗りを設定する
strokeStyle プロパティを使用します。
■単一色塗りの例
単一色塗りを使って、線を描画する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 単一色の塗りを設定する
// ------------------------------------------------------------
context.strokeStyle = "#f84";
context.strokeStyle = "#ff8040";
context.strokeStyle = "rgb(255,128,64)";
context.strokeStyle = "rgba(255,128,64,1.0)";
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 30.0;
// ------------------------------------------------------------
// 描画パスをクリア
// ------------------------------------------------------------
context.beginPath();
// ------------------------------------------------------------
// 描画パスを追加（直線追加）
// ------------------------------------------------------------
var y = 0;
var w = canvas.width;
var h = canvas.height;
for(y = 16 ; y < h ; y += 32){
context.moveTo ( 0 , y );
context.lineTo ( w , y );
}
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に線を描画する
// ------------------------------------------------------------
context.stroke();
■グラデーション塗りの例
線状グラデーション塗りを使って、線を描画する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線状グラデーション塗りを設定する
// ------------------------------------------------------------
// 線状の CanvasGradient オブジェクトを作成する
var gradient = context.createLinearGradient( 10 , 10 , (canvas.width - 10) , (canvas.height - 10) );
// グラデーション色を追加する
gradient.addColorStop( 0.0 , "rgba(255 , 0 , 0 , 1.0)" );
gradient.addColorStop( 0.2 , "rgba(255 , 255 , 0 , 1.0)" );
gradient.addColorStop( 0.4 , "rgba( 0 , 255 , 0 , 1.0)" );
gradient.addColorStop( 0.6 , "rgba( 0 , 255 , 255 , 1.0)" );
gradient.addColorStop( 0.8 , "rgba( 0 , 0 , 255 , 1.0)" );
gradient.addColorStop( 1.0 , "rgba(255 , 0 , 255 , 1.0)" );
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の塗りを設定する
context.strokeStyle = gradient;
// 線の太さを設定する
context.lineWidth = 30.0;
// ------------------------------------------------------------
// 描画パスをクリア
// ------------------------------------------------------------
context.beginPath();
// ------------------------------------------------------------
// 描画パスを追加（直線追加）
// ------------------------------------------------------------
var y = 0;
var w = canvas.width;
var h = canvas.height;
for(y = 16 ; y < h ; y += 32){
context.moveTo ( 0 , y );
context.lineTo ( w , y );
}
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に線を描画する
// ------------------------------------------------------------
context.stroke();
■テクスチャ塗りの例
テクスチャ塗りを使って、線を描画する
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成する関数
// ------------------------------------------------------------
function SVGMatrixCreate(a,b,c,d,e,f){
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
var mtx = svg.createSVGMatrix();
if(a !== undefined) mtx.a = a;
if(b !== undefined) mtx.b = b;
if(c !== undefined) mtx.c = c;
if(d !== undefined) mtx.d = d;
if(e !== undefined) mtx.e = e;
if(f !== undefined) mtx.f = f;
return mtx;
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
canvas.height = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
// ------------------------------------------------------------
var image = new Image();
// ------------------------------------------------------------
// 読み込みに成功すると実行されるイベント
// ------------------------------------------------------------
image.onload = function (){
// ------------------------------------------------------------
// CanvasPattern オブジェクトを作成する
// ------------------------------------------------------------
var pattern = context.createPattern( image , "repeat" );
// ------------------------------------------------------------
// テクスチャ行列の設定
// ------------------------------------------------------------
if(pattern.setTransform){
var mtx = SVGMatrixCreate();
mtx = mtx.translate(0 , 0);
mtx = mtx.rotate(25);
mtx = mtx.scaleNonUniform(1.0 , 1.0);
pattern.setTransform(mtx);
}
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の塗りを設定する
context.strokeStyle = pattern;
// 線の太さを設定する
context.lineWidth = 30.0;
// ------------------------------------------------------------
// 描画パスをクリア
// ------------------------------------------------------------
context.beginPath();
// ------------------------------------------------------------
// 描画パスを追加（直線追加）
// ------------------------------------------------------------
var y = 0;
var w = canvas.width;
var h = canvas.height;
for(y = 16 ; y < h ; y += 32){
context.moveTo ( 0 , y );
context.lineTo ( w , y );
}
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に線を描画する
// ------------------------------------------------------------
context.stroke();
};
// ------------------------------------------------------------
// URL を指定して読み込みを開始する
// ------------------------------------------------------------
image.src = "http://example.com/graphics/texture_00.png";
■線の太さを設定する
lineWidth プロパティを使用します。
デフォルトは、1.0 です。
線の太さを設定する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 10.0;
// ------------------------------------------------------------
// 線を描画する
// ------------------------------------------------------------
// 描画パスをクリア
context.beginPath();
// サブパスを開始（開始位置）
context.moveTo( 20 , 20 );
// サブパスを追加（直線追加）
context.lineTo( 280 , 130 );
// 累積された描画パスを使って、実際に線を描画する
context.stroke();
■線先の種類を設定する
lineCap プロパティを使用します。
デフォルトは、"butt" です。
■線先の種類について
以下の種類があります。
| 定数 | 説明 |
| "butt" | 線の先にキャップなし |
| "round" | 線の先に丸いキャップ |
| "square" | 線の先に四角いキャップ |
| "butt" | "round" | "square" |
 |
 |
 |
■使用例
線先の種類を設定する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 20.0;
// 線先の種類を設定する
context.lineCap = "round";
// ------------------------------------------------------------
// 線を描画する
// ------------------------------------------------------------
// 描画パスをクリア
context.beginPath();
// サブパスを開始（開始位置）
context.moveTo( 20 , 20 );
// サブパスを追加（直線追加）
context.lineTo( 280 , 130 );
// 累積された描画パスを使って、実際に線を描画する
context.stroke();
■角の種類を設定する
lineJoin プロパティを使用します。
デフォルトは、"miter" です。
■角の種類について
以下の種類があります。
| 定数 | 説明 |
| "miter" | 角をマイター結合 |
| "bevel" | 角をベベル結合 |
| "round" | 角をラウンド結合 |
| MITER | BEVEL | ROUND |
 |
 |
 |
■使用例
角の種類を設定する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 20.0;
// 角の種類を設定する
context.lineJoin = "round";
// ------------------------------------------------------------
// 線を描画する
// ------------------------------------------------------------
// 描画パスをクリア
context.beginPath();
// サブパスを開始（開始位置）
context.moveTo( 20 , 20 );
// サブパスを追加（直線追加）
context.lineTo( 280 , 130 );
// サブパスを追加（直線追加）
context.lineTo( 20 , 130 );
// 累積された描画パスを使って、実際に線を描画する
context.stroke();
■マイターの尖りの延長サイズを設定する
miterLimit プロパティを使用します。
デフォルトは、10.0 です。
角の種類（lineJoin）が "miter" である場合に効果があります。
マイターの尖りの延長サイズを指定します。(0.0 より大きい値)
実際のサイズは、(lineWidth * miterLimit) です。
| 最小 | 最大 |
 |
 |
■使用例
マイターの尖りの延長サイズを設定する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 30.0;
// 角の種類を設定する
context.lineJoin = "miter";
// マイターの尖りの延長サイズを設定する
context.miterLimit = 5.0;
// ------------------------------------------------------------
// 線を描画する
// ------------------------------------------------------------
// 描画パスをクリア
context.beginPath();
// サブパスを開始（開始位置）
context.moveTo( 20 , 20 );
// サブパスを追加（直線追加）
context.lineTo( 280 , 130 );
// サブパスを追加（直線追加）
context.lineTo( 20 , 130 );
// 累積された描画パスを使って、実際に線を描画する
context.stroke();
■破線を設定する
■破線の間隔リストについて
配列を用意して、間隔値を好きなだけ格納します。
有 無 有 無 有 無 ... の順番でマッピングされます。
配列の最後まで到達すると、最初の番地に戻ります。
例えば、[ 8 , 2 ] の描画結果です。
例えば、[ 24 , 4 , 8 , 2 ] の描画結果です。
■破線の間隔リストを設定する
setLineDash() メソッドを使用します。
線先の種類（lineCap）が "butt" である場合に効果があります。
CanvasRenderingContext2D.setLineDash ( 破線の間隔リスト ) :Void
| 第01引数 | Array | 破線の間隔リストを指定。 |
| 戻り値 | Void | なし。 |
■破線の間隔リストを取得する
getLineDash() メソッドを使用します。
CanvasRenderingContext2D.getLineDash ( ) :Array
| 引数 | Void | なし。 |
| 戻り値 | Array | 破線の間隔リストが得られる。 |
■破線のオフセットを設定する
lineDashOffset プロパティを使用します。
デフォルトは、0.0 です。
破線全体を、相対的にずらすことができます。
■使用例
破線を設定する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 20.0;
// 線先の種類を設定する
context.lineCap = "butt";
// ------------------------------------------------------------
// 破線を設定する
// ------------------------------------------------------------
if(context.setLineDash){
// 破線の間隔リストを設定する
context.setLineDash([10,2]);
// 破線のオフセットを設定する
context.lineDashOffset = 0.0;
}
// ------------------------------------------------------------
// 線を描画する
// ------------------------------------------------------------
// 描画パスをクリア
context.beginPath();
// サブパスを開始（開始位置）
context.moveTo( 20 , 20 );
// サブパスを追加（直線追加）
context.lineTo( 280 , 130 );
// サブパスを追加（直線追加）
context.lineTo( 20 , 130 );
// 累積された描画パスを使って、実際に線を描画する
context.stroke();
面の描画スタイルについて
■面の描画スタイルの一覧
■プロパティ
| プロパティ名 | 型 | 説明 |
| fillStyle | String CanvasGradient CanvasPattern | 面の塗りを設定する（単一色、グラデーション、テクスチャ） |
■面の塗りを設定する
fillStyle プロパティを使用します。
■単一色塗りの例
単一色塗りを使って、面を描画する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 単一色の塗りを設定する
// ------------------------------------------------------------
context.fillStyle = "#f84";
context.fillStyle = "#ff8040";
context.fillStyle = "rgb(255,128,64)";
context.fillStyle = "rgba(255,128,64,1.0)";
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
context.fillRect( 0 , 0 , canvas.width , canvas.height );
■グラデーション塗りの例
線状グラデーション塗りを使って、面を描画する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線状グラデーション塗りを設定する
// ------------------------------------------------------------
// 線状の CanvasGradient オブジェクトを作成する
var gradient = context.createLinearGradient( 10 , 10 , (canvas.width - 10) , (canvas.height - 10) );
// グラデーション色を追加する
gradient.addColorStop( 0.0 , "rgba(255 , 0 , 0 , 1.0)" );
gradient.addColorStop( 0.2 , "rgba(255 , 255 , 0 , 1.0)" );
gradient.addColorStop( 0.4 , "rgba( 0 , 255 , 0 , 1.0)" );
gradient.addColorStop( 0.6 , "rgba( 0 , 255 , 255 , 1.0)" );
gradient.addColorStop( 0.8 , "rgba( 0 , 0 , 255 , 1.0)" );
gradient.addColorStop( 1.0 , "rgba(255 , 0 , 255 , 1.0)" );
// ------------------------------------------------------------
// 面の塗りを設定する
// ------------------------------------------------------------
context.fillStyle = gradient;
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
context.fillRect( 0 , 0 , canvas.width , canvas.height );
■テクスチャ塗りの例
テクスチャ塗りを使って、面を描画する
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成する関数
// ------------------------------------------------------------
function SVGMatrixCreate(a,b,c,d,e,f){
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
var mtx = svg.createSVGMatrix();
if(a !== undefined) mtx.a = a;
if(b !== undefined) mtx.b = b;
if(c !== undefined) mtx.c = c;
if(d !== undefined) mtx.d = d;
if(e !== undefined) mtx.e = e;
if(f !== undefined) mtx.f = f;
return mtx;
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
canvas.height = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
// ------------------------------------------------------------
var image = new Image();
// ------------------------------------------------------------
// 読み込みに成功すると実行されるイベント
// ------------------------------------------------------------
image.onload = function (){
// ------------------------------------------------------------
// CanvasPattern オブジェクトを作成する
// ------------------------------------------------------------
var pattern = context.createPattern( image , "repeat" );
// ------------------------------------------------------------
// テクスチャ行列の設定
// ------------------------------------------------------------
if(pattern.setTransform){
var mtx = SVGMatrixCreate();
mtx = mtx.translate(0 , 0);
mtx = mtx.rotate(25);
mtx = mtx.scaleNonUniform(1.0 , 1.0);
pattern.setTransform(mtx);
}
// ------------------------------------------------------------
// 面の塗りを設定する
// ------------------------------------------------------------
context.fillStyle = pattern;
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
context.fillRect( 0 , 0 , canvas.width , canvas.height );
};
// ------------------------------------------------------------
// URL を指定して読み込みを開始する
// ------------------------------------------------------------
image.src = "http://example.com/graphics/texture_00.png";
塗りの設定について
■単一色塗りについて
スタイルシートの color と同等の設定が可能です。
■ RGB ヘキサ表記
| 表記 | 説明 |
| #fff | 赤(0～f) 緑(0～f) 青(0～f) を指定する |
| #ffffff | 赤(00～ff) 緑(00～ff) 青(00～ff) を指定する |
■関数表記
| 表記 | 説明 |
| rgb(r,g,b) | 赤(0～255) 緑(0～255) 青(0～255) を指定する |
| rgba(r,g,b,a) | 赤(0～255) 緑(0～255) 青(0～255) 透過(0.0～1.0) を指定する |
| hsl(h,s,l) | 色相(0～360) 彩度(0～100%) 輝度(0～100%) を指定する |
| hsla(h,s,l,a) | 色相(0～360) 彩度(0～100%) 輝度(0～100%) 透過(0.0～1.0) を指定する |
■グラデーション塗りについて
■グラデーション塗りの種類について
グラデーション塗りには、以下の種類があります。
| メソッド | 説明 |
| createLinearGradient() | 線状グラデーション塗り |
| createRadialGradient() | 円状グラデーション塗り |
■線状グラデーションについて
１．CanvasGradient オブジェクトを作成する
createLinearGradient() メソッドを使用します。
開始側の位置と、終了側の位置を指定します。
CanvasRenderingContext2D.createLinearGradient ( x0 , y0 , x1 , y1 ) :CanvasGradient
| 第01引数 | Number | (開始側の位置) x 座標 |
| 第02引数 | Number | (開始側の位置) y 座標 |
| 第03引数 | Number | (終了側の位置) x 座標 |
| 第04引数 | Number | (終了側の位置) y 座標 |
| 戻り値 | CanvasGradient | 新しい CanvasGradient オブジェクトが得られる。 |
２．グラデーションに色を追加する
addColorStop() メソッドを使用します。
最低でも１つは追加します。
■使用例
線状グラデーション塗りを使って、矩形を描画する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
canvas.height = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線状グラデーション塗りを設定する
// ------------------------------------------------------------
// 線状の CanvasGradient オブジェクトを作成する
var gradient = context.createLinearGradient( 200 , 200 , (canvas.width - 200) , (canvas.height - 200) );
// グラデーション色を追加する
gradient.addColorStop( 0.0 , "rgba(255 , 0 , 0 , 1.0)" );
gradient.addColorStop( 0.2 , "rgba(255 , 255 , 0 , 1.0)" );
gradient.addColorStop( 0.4 , "rgba( 0 , 255 , 0 , 1.0)" );
gradient.addColorStop( 0.6 , "rgba( 0 , 255 , 255 , 1.0)" );
gradient.addColorStop( 0.8 , "rgba( 0 , 0 , 255 , 1.0)" );
gradient.addColorStop( 1.0 , "rgba(255 , 0 , 255 , 1.0)" );
// ------------------------------------------------------------
// 面の塗りを設定する
// ------------------------------------------------------------
context.fillStyle = gradient;
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
context.fillRect( 0 , 0 , canvas.width , canvas.height );
■円状グラデーションについて
１．CanvasGradient オブジェクトを作成する
createRadialGradient() メソッドを使用します。
開始側の円と、終了側の円を指定します。
円は、もう片方の内側に完全に収まっている必要があります。
一部でも重なってない部分があると、破綻します。
CanvasRenderingContext2D.createRadialGradient ( x0 , y0 , r0 , x1 , y1 , r1 ) :CanvasGradient
| 第01引数 | Number | (開始側の円) 中心 x 座標 |
| 第02引数 | Number | (開始側の円) 中心 y 座標 |
| 第03引数 | Number | (開始側の円) 半径 |
| 第04引数 | Number | (終了側の円) 中心 x 座標 |
| 第05引数 | Number | (終了側の円) 中心 y 座標 |
| 第06引数 | Number | (終了側の円) 半径 |
| 戻り値 | CanvasGradient | 新しい CanvasGradient オブジェクトが得られる。 |
２．グラデーションに色を追加する
addColorStop() メソッドを使用します。
最低でも１つは追加します。
■使用例
円状グラデーション塗りを使って、矩形を描画する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
canvas.height = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 円状グラデーション塗りを設定する
// ------------------------------------------------------------
// 円状の CanvasGradient オブジェクトを作成する
var gradient = context.createRadialGradient( 450 , 500 , 0 , 550 , 500 , 400 );
// グラデーション色を追加する
gradient.addColorStop( 0.0 , "rgba(255 , 0 , 0 , 1.0)" );
gradient.addColorStop( 0.2 , "rgba(255 , 255 , 0 , 1.0)" );
gradient.addColorStop( 0.4 , "rgba( 0 , 255 , 0 , 1.0)" );
gradient.addColorStop( 0.6 , "rgba( 0 , 255 , 255 , 1.0)" );
gradient.addColorStop( 0.8 , "rgba( 0 , 0 , 255 , 1.0)" );
gradient.addColorStop( 1.0 , "rgba(255 , 0 , 255 , 1.0)" );
// ------------------------------------------------------------
// 面の塗りを設定する
// ------------------------------------------------------------
context.fillStyle = gradient;
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
context.fillRect( 0 , 0 , canvas.width , canvas.height );
■ CanvasGradient オブジェクトに色を追加する
addColorStop() メソッドを使用します。
CanvasGradient.addColorStop ( offset , "color" ) :Void
| 第01引数 | Number | 色の位置を (0.0 ～ 1.0) の値で指定 |
| 第02引数 | String | 単一色のスタイルを指定 |
| 戻り値 | Void | なし |
■第01引数 (色の位置)
色の位置を指定します。
0.0(開始側) ～ 1.0(終了側) の数値を指定します。
■第02引数 (単一色)
こちらで解説しています。
■テクスチャ塗りについて
１．CanvasPattern オブジェクトを作成する
createPattern() メソッドを使用します。
CanvasRenderingContext2D.createPattern ( image , "repetition" ) :CanvasPattern
| 第01引数 | * | イメージソースを指定 |
| 第02引数 | String | タイリング描画の設定 |
| 戻り値 | CanvasPattern | 新しい CanvasPattern オブジェクトが得られる。 |
■第01引数 (イメージソース)
以下のオブジェクトを、テクスチャとして利用できます。
| 型 | 説明 |
| HTMLImageElement | <IMG> 要素 |
| HTMLCanvasElement | <CANVAS> 要素 |
| HTMLVideoElement | <VIDEO> 要素 |
| ImageBitmap | 最適化済みテクスチャ |
■第02引数 (タイリング描画)
以下の文字列を指定します。
| 文字列 | 説明 |
| "repeat" | タイリング描画する |
| "repeat-x" | タイリング描画する（水平方向のみ） |
| "repeat-y" | タイリング描画する（垂直方向のみ） |
| "no-repeat" | タイリング描画しない |
２．テクスチャの姿勢を設定する（Level2 以降）
CanvasPattern.setTransform ( matrix ) :Void
| 第01引数 | SVGMatrix | SVGMatrix オブジェクトを指定 |
| 戻り値 | Void | なし |
■対応していない場合（Level1）
テクスチャ行列の逆行列を計算します。
逆行列を使って、描画パスをテクスチャ座標系に落とし込みます。
描画姿勢の設定時に、テクスチャ行列を合成して相殺します。
■使用例
テクスチャ塗りを使って、矩形を描画する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
canvas.height = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// イメージ要素を用意する
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
var image = new Image();
// ------------------------------------------------------------
// 読み込みに成功すると実行されるイベント
// ------------------------------------------------------------
image.onload = function (){
// ------------------------------------------------------------
// CanvasPattern オブジェクトを作成する
// ------------------------------------------------------------
var pattern = context.createPattern( image , "repeat" );
// ------------------------------------------------------------
// 面の塗りを設定する
// ------------------------------------------------------------
context.fillStyle = pattern;
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
context.fillRect( 0 , 0 , canvas.width , canvas.height );
};
// ------------------------------------------------------------
// Data URI Scheme を指定して読み込みを開始する
// ------------------------------------------------------------
image.src =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAgMAAAC+UIlYAAAAA3NCSVQICAjb4U/gAAAADFBMVEUUFB" +
"SKiopbW1szMzNPawATAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADA3LzA3LzE1L9wkmQAAACF0RV" +
"h0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgNC4w6iYndQAAB4RJREFUeJxdV8+q8sgTbcg2cN9kfkK2F/IUDvgACvo+n2" +
"BgtgFbyLdPgwp3G8g7zOwUOheym0h6zqnqVu8vKzVl/T11qsoYE4I7NeFxNW9PVnprrQ/yYxGG8xTG9/cmDw4C7tLpl3kKofshkA" +
"VqaAb9Wx/C/1mA1hYCdtCfizKEgqq6p1Q+3+xuZ11YyNdulFdj+ZkkaKK29nR5GNrOcgp+hDAmTwpogEQzBPPyHoZCUkENMGEh8H" +
"hpDZcQbSKyFip2yIQJjyjQB++HEP3MZvhAJwaT/pSVk3MufcslD3DibIaQkjE1lipUX9A47d248Pi+Mhfz7cbsj0mfZMq2Bn/qi7" +
"yAglayH53uw10EGtPA7mPsw+zl+xCdKMK/jUgYe4cEHig41rTRRYGhjQLwDPFTwa5i9pMTs79FgdbPYXAt4t7WyP6Y0jK5KHBC/I" +
"76toe/4ET0soDSVgWsvfmWFjabTcXsJxXzPQlAhHk7bLbwqIzlAEpow1Q2PnW13m9qeHk1714YxhYlNuuDtb+f6MxD8A1MMON4js" +
"fjYQ8bTaq4+HkTH1SiqjabFapzeeI7K4EKY6u6rkSDRRTU8P3E2AfcNPaIl8QGojhUQMA/LxACeK2R/4ofO1tvCeS3Fupnb8S6hg" +
"Gxaudirq9XCcQZpPNoVaK20NAoSLu+EGB5o9iLmahTtfJifNBUORvXxreKoNSw7NcF3TQ+vkC9pP53AV1ODD2YCjNJUa33kxeJRh" +
"ADAVACJEsDtDf21Dj39zS4xjaArWR5OnumrCABtU3rPVTOk8MnQQxS5B2hkaFl/d01hCWBeQdbBdHg7E0rX4Rw9hOQ3X/CLsAnGj" +
"7YevfLt1GG4v/HxRdkPSG+IMMguMY9Ivbg8ANtnSN4dxbnlaNcUFjwKeLHOWlgyKeLFERITgkRMJykwTNo2EKA6MqKFzdRxcTwKY" +
"DCDAKeoug/n8wTYGKUMgIl4En5ueu+Xig8/09IFWgEBiIZLJ44ZhHPIkAyr2MY7w9qMEmdi4koeesBOqA2LheG8UGOemszejLyiy" +
"Rl1DB+NInp5Hcyy0AncuEoAjT1Mv8pVUIi6GVPjiL+1EjGdIbPiDU6UdKGuwRhe/oWnFCgejnGoXSHwONLJ4pr7uIzihuImQy8d2" +
"8mkPl310M/ANs0VI1MDOoEOKoF6kJZ4v8C7Ya1IcI0VcTXOWjgZ20O1oZeihPwBm5dTGRZeST1ENcp2ofBT5wXeH/SvmTqAZrhb3" +
"GiIFonc4Gphhy32e2aIHEy0EUsLTScPQbFbgt6UQxCwzmlHR+NJxnWh/2KNHv51jgVE1A2TWjeG0josF6vDvWJAtIoOrsIUTNAQb" +
"VZ75frDTDYKS7POskwEyZDTt/++rVc71eaCCieI+7opnEOEa6Wy+X6AJg/4xf6oD8GkwceLJd/rjaYHPornNB6wBxM2N1+SQ0YSD" +
"Is6IRTZEKbGeytXv+CwH7HbeAqxZ//8EE/i4YD3/+5qnYvhptIOWxiVLM9io+rzdHGXYjjCrSj4EaiLH1cLpHpSMPMoGuUrHoD6G" +
"34/sBejbsOmaY9uUiD3h6pAZVwlzhVET4ZSNJmwr+WPiALmNuhWygLcBCfiJ/clJNEsTqIgiI1uWCU8AB4b8e9ZGHgjqN9pCNTim" +
"s+0OfrX3sSUui+ctXwJRuK/a2Zb4mGinN/kScmCLLjSGlIeNBAC4snGXBb5BwLgqvWHg7b116gXk6A0U5pMPi6RhJ+sg00VFusAl" +
"f9fDxEe88HrsuPDAOJ4NAbxp8CAHKlYUAADikty8MP2XzDKK9ELfgsdl0MMaNAgImDPY0i8GJ+eRbK9jUmuZjIptsPFxaSzvmGlQ" +
"bNatJoGJ5BZAUrhmphHTnp/PI/Zn7eseYlkHiwUcM9so8+RTl+KZlbjUJ2bPfS0PVlJ5niXjaqDzcY+04ZKGQL/5i5UHjtDdHwrA" +
"S6ArTOTFU2JQo+/MPGz03k4gXXYhsr/BEaakgmyLpsyyDB65IhPqRS5JEmiUoFZT+171GQorAhyAWinpVzE/OQqwApikVuG6eQ4+" +
"LxyiQX9EnivLcSJVYQIjydMOQtUjg3iCbyiR4rSQN6RlRnEJQo9Zp5ljvvsfVwd85JuNIXiOf4Vm5SA72X06gzukogqed4esDi7c" +
"6VkcMrKOI8NSTIZTwSGDRZP/JxyzH++7lO+3sjie91kLL90WS8VVRgxniRtJVcfCQsWpBZoj6c7U32o3SdsRTcEp9ng/dW5mOvU4" +
"WlqIVu0tnAGuhgEaKUY6ZKnS6lYJiLpEFIzG5T6SXTTu/MXnADDUNbY+bFcmakYccbMNMLMRcuqV+n5Sf+gLvoTQP3hN2RG1HUwI" +
"EcdGMQH5go4QfV0KFGMrAo8NTAOONlUqTRnYeYh4K0XNeNmuDRidH9LR80D6Tl3W73ft4GXTRCGi9yLZ2ihq9SO+t1KROTOGPaGO" +
"Zi1BfwEXuhCkw86ppJNeSfasHI6in7ph6OTyb+6jWDyOikx0ofD83va7TxybMW1wvaozNPL126nvKiiAJxi+eO3drGv9pb5hZxlO" +
"oTAlau4Y3sr+JZw1l/Nf8BKbRC89AEZB8AAAAASUVORK5CYII=";
テクスチャ塗りを使って、スプライト風に描画する
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成する関数
// ------------------------------------------------------------
function SVGMatrixCreate(a,b,c,d,e,f){
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
var mtx = svg.createSVGMatrix();
if(a !== undefined) mtx.a = a;
if(b !== undefined) mtx.b = b;
if(c !== undefined) mtx.c = c;
if(d !== undefined) mtx.d = d;
if(e !== undefined) mtx.e = e;
if(f !== undefined) mtx.f = f;
return mtx;
}
// ------------------------------------------------------------
// 座標を変換する関数
// ------------------------------------------------------------
function SVGMatrixTransformPosition(matrix,x,y){
return {
x:x * matrix.a + y * matrix.c + matrix.e,
y:x * matrix.b + y * matrix.d + matrix.f
};
}
// ------------------------------------------------------------
// Context2D に SVGMatrix をセットする関数
// ------------------------------------------------------------
function Context2D_Set_SVGMatrix(context , matrix){
context.setTransform(matrix.a,matrix.b,matrix.c,matrix.d,matrix.e,matrix.f);
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
canvas.height = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
// ------------------------------------------------------------
var image = new Image();
// ------------------------------------------------------------
// 読み込みに成功すると実行されるイベント
// ------------------------------------------------------------
image.onload = function (){
// ------------------------------------------------------------
// テクスチャ塗りを設定する
// ------------------------------------------------------------
// CanvasPattern オブジェクトを作成する
var pattern = context.createPattern( image , "repeat" );
// 面の塗りを設定する
context.fillStyle = pattern;
// ------------------------------------------------------------
// スプライトの行列
// ------------------------------------------------------------
var mtx_s = SVGMatrixCreate();
mtx_s = mtx_s.translate(100 , 50);
mtx_s = mtx_s.rotate(30);
mtx_s = mtx_s.scaleNonUniform(1.0 , 1.0);
// ------------------------------------------------------------
// テクスチャの行列
// ------------------------------------------------------------
var mtx_t = SVGMatrixCreate();
mtx_t = mtx_t.translate(0 , 0);
mtx_t = mtx_t.rotate(0);
mtx_t = mtx_t.scaleNonUniform(1.0 , 1.0);
// ------------------------------------------------------------
// テクスチャのクリッピング
// ------------------------------------------------------------
var sx = 10;
var sy = 10;
var sw = 100;
var sh = 100;
// ------------------------------------------------------------
// setTransform() メソッドに対応している
// ------------------------------------------------------------
if(pattern.setTransform){
// ------------------------------------------------------------
// テクスチャの姿勢を設定
// ------------------------------------------------------------
var mtx = mtx_t.translate(-sx , -sy);
pattern.setTransform( mtx );
// ------------------------------------------------------------
// スプライトの姿勢を設定
// ------------------------------------------------------------
Context2D_Set_SVGMatrix(context , mtx_s);
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
context.fillRect( 0 , 0 , sw , sh );
}else{
// ------------------------------------------------------------
// テクスチャの姿勢
// ------------------------------------------------------------
var mtx0 = mtx_t.translate(-sx , -sy);
// ------------------------------------------------------------
// 逆行列を計算する
// ------------------------------------------------------------
var mtx1 = mtx0.inverse();
// ------------------------------------------------------------
// 描画パスをテクスチャ座標系に変換
// ------------------------------------------------------------
var v0 = SVGMatrixTransformPosition(mtx1 , 0 , 0 );
var v1 = SVGMatrixTransformPosition(mtx1 , sw , 0 );
var v2 = SVGMatrixTransformPosition(mtx1 , sw , sh);
var v3 = SVGMatrixTransformPosition(mtx1 , 0 , sw);
// ------------------------------------------------------------
// スプライトの姿勢を設定
// ------------------------------------------------------------
var mtx = mtx_s.multiply(mtx0);
Context2D_Set_SVGMatrix(context , mtx);
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
context.beginPath();
context.moveTo(v0.x , v0.y);
context.lineTo(v1.x , v1.y);
context.lineTo(v2.x , v2.y);
context.lineTo(v3.x , v3.y);
context.closePath();
context.fill();
}
};
// ------------------------------------------------------------
// URL を指定して読み込みを開始する
// ------------------------------------------------------------
image.src = "http://example.com/graphics/texture_00.png";
描画姿勢の設定について
■トランスフォーム関連の機能一覧
■メソッド
| メソッド | 説明 |
| translate() | 平行移動成分を合成する |
| rotate() | 回転成分を合成する |
| scale() | 拡大縮小成分を合成する |
| transform() | 行列を合成する（乗算する） |
| setTransform() | 行列をセットする |
■描画姿勢の設定について（Level1 の場合）
トランスフォーム関連の機能は少なく、使い勝手は良くありません。
より高機能な、SVGMatrix を利用します。
一部のメソッドは、仕様が異なります。
■描画姿勢をリセットする
setTransform() メソッドを使用します。
引数に、単位行列をセットします。
( a:1 , b:0 , c:0 , d:1 , e:0 , f:0 )
■描画姿勢をリセットする関数
描画姿勢をリセットする関数
// ------------------------------------------------------------
// 描画姿勢をリセットする関数
// ------------------------------------------------------------
function Context2D_Identity(context){
context.setTransform(1 , 0 , 0 , 1 , 0 , 0);
}
■描画姿勢をリセットする（Level2 以降）
resetTransform() メソッドを使用します。
CanvasRenderingContext2D.resetTransform( ) :Void
| 引数 | Void | なし |
| 戻り値 | Void | なし |
■現在の行列を取得する（Level2 以降）
currentTransform プロパティを使用します。
新しい、SVGMatrix オブジェクトが得られます。
■新しい行列を設定する
CanvasRenderingContext2D.setTransform ( a , b , c , d , e , f ) :Void
| 第01引数 | Number | x 軸成分の x 座標 (a プロパティに相当) |
| 第02引数 | Number | x 軸成分の y 座標 (b プロパティに相当) |
| 第03引数 | Number | y 軸成分の x 座標 (c プロパティに相当) |
| 第04引数 | Number | y 軸成分の y 座標 (d プロパティに相当) |
| 第05引数 | Number | 座標成分の x 座標 (e プロパティに相当) |
| 第06引数 | Number | 座標成分の y 座標 (f プロパティに相当) |
| 戻り値 | Void | なし |
■使用例
SVGMatrix を使って、描画姿勢を設定する
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成する関数
// ------------------------------------------------------------
function SVGMatrixCreate(a,b,c,d,e,f){
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
var mtx = svg.createSVGMatrix();
if(a !== undefined) mtx.a = a;
if(b !== undefined) mtx.b = b;
if(c !== undefined) mtx.c = c;
if(d !== undefined) mtx.d = d;
if(e !== undefined) mtx.e = e;
if(f !== undefined) mtx.f = f;
return mtx;
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
canvas.height = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 4.0;
// 線先の種類を設定する
context.lineCap = "round";
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成する（単位行列）
// ------------------------------------------------------------
var mtx = SVGMatrixCreate();
// ------------------------------------------------------------
// 各成分を順番に合成（移動 ← 回転 ← 拡大）
// ------------------------------------------------------------
// 並行移動成分を合成
mtx = mtx.translate( 200.0 , 100.0 );
// 回転成分を合成
mtx = mtx.rotate( 25.0 );
// 拡大縮小成分を合成
mtx = mtx.scaleNonUniform( 2.0 , 3.0 );
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
context.setTransform(mtx.a , mtx.b , mtx.c , mtx.d , mtx.e , mtx.f);
// ------------------------------------------------------------
// グラフィックを描画
// ------------------------------------------------------------
// 矩形を描画
context.fillStyle = "#e0e0e0";
context.fillRect(0 , 0 , 100 , 100);
// 赤線を描画
context.strokeStyle = "#ff0000";
context.beginPath();
context.moveTo( 0 , 0 );
context.lineTo( 100 , 0 );
context.stroke();
// 青線を描画
context.strokeStyle = "#0000ff";
context.beginPath();
context.moveTo( 0 , 0 );
context.lineTo( 0 , 100 );
context.stroke();
■並行移動成分を合成する
■並行移動成分を合成する
translate() メソッドを使用します。
以下の順番で乗算されます。
(新しい行列) = (自身の行列) * (並行移動成分)
平行移動成分は、ローカル座標系に作用します。
CanvasRenderingContext2D.translate ( x , y ) :Void
| 第01引数 | Number | x 座標を指定。 |
| 第02引数 | Number | y 座標を指定。 |
| 戻り値 | Void | なし |
■使用例
並行移動成分を合成する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
canvas.height = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 4.0;
// 線先の種類を設定する
context.lineCap = "round";
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// 描画姿勢をリセットする（単位行列）
context.setTransform(1 , 0 , 0 , 1 , 0 , 0);
// 並行移動成分を合成
context.translate(200.0 , 100.0);
// ------------------------------------------------------------
// グラフィックを描画
// ------------------------------------------------------------
// 矩形を描画
context.fillStyle = "#e0e0e0";
context.fillRect(0 , 0 , 100 , 100);
// 赤線を描画
context.strokeStyle = "#ff0000";
context.beginPath();
context.moveTo( 0 , 0 );
context.lineTo( 100 , 0 );
context.stroke();
// 青線を描画
context.strokeStyle = "#0000ff";
context.beginPath();
context.moveTo( 0 , 0 );
context.lineTo( 0 , 100 );
context.stroke();
■回転成分を合成する（角度指定）
■回転成分を合成する（角度指定）
rotate() メソッドを使用します。
以下の順番で乗算されます。
(新しい行列) = (自身の行列) * (回転成分)
回転成分は、ローカル座標系に作用します。
CanvasRenderingContext2D.rotate ( angle ) :Void
| 第01引数 | Number | 角度を指定。（単位はラジアン） |
| 戻り値 | Void | なし |
■使用例
回転成分を合成する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
canvas.height = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 4.0;
// 線先の種類を設定する
context.lineCap = "round";
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// 描画姿勢をリセットする（単位行列）
context.setTransform(1 , 0 , 0 , 1 , 0 , 0);
// 並行移動成分を合成
context.translate(200.0 , 100.0);
// 回転成分を合成
context.rotate((30.0) * (Math.PI / 180));
// ------------------------------------------------------------
// グラフィックを描画
// ------------------------------------------------------------
// 矩形を描画
context.fillStyle = "#e0e0e0";
context.fillRect(0 , 0 , 100 , 100);
// 赤線を描画
context.strokeStyle = "#ff0000";
context.beginPath();
context.moveTo( 0 , 0 );
context.lineTo( 100 , 0 );
context.stroke();
// 青線を描画
context.strokeStyle = "#0000ff";
context.beginPath();
context.moveTo( 0 , 0 );
context.lineTo( 0 , 100 );
context.stroke();
■拡大縮小成分を合成する
■拡大縮小成分を合成する
scale() メソッドを使用します。
以下の順番で乗算されます。
(新しい行列) = (自身の行列) * (拡大縮小成分)
拡大縮小成分は、ローカル座標系に作用します。
CanvasRenderingContext2D.scale ( x , y ) :Void
| 第01引数 | Number | x 軸方向の拡大率を指定。(1.0 で等倍) |
| 第02引数 | Number | y 軸方向の拡大率を指定。(1.0 で等倍) |
| 戻り値 | Void | なし |
■使用例
拡大縮小成分を合成する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
canvas.height = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 4.0;
// 線先の種類を設定する
context.lineCap = "round";
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// 描画姿勢をリセットする（単位行列）
context.setTransform(1 , 0 , 0 , 1 , 0 , 0);
// 並行移動成分を合成
context.translate(200.0 , 100.0);
// 拡大縮小成分を合成
context.scale(2.0 , 3.0);
// ------------------------------------------------------------
// グラフィックを描画
// ------------------------------------------------------------
// 矩形を描画
context.fillStyle = "#e0e0e0";
context.fillRect(0 , 0 , 100 , 100);
// 赤線を描画
context.strokeStyle = "#ff0000";
context.beginPath();
context.moveTo( 0 , 0 );
context.lineTo( 100 , 0 );
context.stroke();
// 青線を描画
context.strokeStyle = "#0000ff";
context.beginPath();
context.moveTo( 0 , 0 );
context.lineTo( 0 , 100 );
context.stroke();
■行列を合成する（乗算する）
■行列を合成する（乗算する）
transform() メソッドを使用します。
以下の順番で乗算されます。
(新しい行列) = (自身の行列) * (引数の行列)
引数で指定した行列は、ローカル座標系に作用します。
CanvasRenderingContext2D.transform ( a , b , c , d , e , f ) :Void
| 第01引数 | Number | x 軸成分の x 座標 (a プロパティに相当) |
| 第02引数 | Number | x 軸成分の y 座標 (b プロパティに相当) |
| 第03引数 | Number | y 軸成分の x 座標 (c プロパティに相当) |
| 第04引数 | Number | y 軸成分の y 座標 (d プロパティに相当) |
| 第05引数 | Number | 座標成分の x 座標 (e プロパティに相当) |
| 第06引数 | Number | 座標成分の y 座標 (f プロパティに相当) |
| 戻り値 | Void | なし |
■使用例
複数の行列を合成する
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成する関数
// ------------------------------------------------------------
function SVGMatrixCreate(a,b,c,d,e,f){
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
var mtx = svg.createSVGMatrix();
if(a !== undefined) mtx.a = a;
if(b !== undefined) mtx.b = b;
if(c !== undefined) mtx.c = c;
if(d !== undefined) mtx.d = d;
if(e !== undefined) mtx.e = e;
if(f !== undefined) mtx.f = f;
return mtx;
}
// ------------------------------------------------------------
// Context2D に SVGMatrix を乗算する関数
// ------------------------------------------------------------
function Context2D_Multiply(context,matrix){
context.transform(matrix.a , matrix.b , matrix.c , matrix.d , matrix.e , matrix.f);
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
canvas.height = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 4.0;
// 線先の種類を設定する
context.lineCap = "round";
// ------------------------------------------------------------
// 各行列を作成する
// ------------------------------------------------------------
// 単位行列を作成
mtx = SVGMatrixCreate();
// 並行移動行列を作成
var mtx0 = mtx.translate( 200.0 , 100.0 );
// 回転行列を作成
var mtx1 = mtx.rotate( 10.0 );
// 拡大縮小行列を作成
var mtx2 = mtx.scaleNonUniform( 2.0 , 3.0 );
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// 描画姿勢をリセットする（単位行列）
context.setTransform(1 , 0 , 0 , 1 , 0 , 0);
// 各行列を順番に合成 (移動 ← 回転 ← 拡大)
Context2D_Multiply(context , mtx0);
Context2D_Multiply(context , mtx1);
Context2D_Multiply(context , mtx2);
// ------------------------------------------------------------
// グラフィックを描画
// ------------------------------------------------------------
// 矩形を描画
context.fillStyle = "#e0e0e0";
context.fillRect(0 , 0 , 100 , 100);
// 赤線を描画
context.strokeStyle = "#ff0000";
context.beginPath();
context.moveTo( 0 , 0 );
context.lineTo( 100 , 0 );
context.stroke();
// 青線を描画
context.strokeStyle = "#0000ff";
context.beginPath();
context.moveTo( 0 , 0 );
context.lineTo( 0 , 100 );
context.stroke();
シャドウについて
■シャドウ関連の機能一覧
■プロパティ
| プロパティ名 | 型 | 説明 |
| shadowColor | String | シャドウカラーを設定する |
| shadowOffsetX | Number | シャドウのオフセット x 座標を設定する |
| shadowOffsetY | Number | シャドウのオフセット y 座標を設定する |
| shadowBlur | Number | シャドウのぼかし量を設定する |
■シャドウの設定について
■シャドウカラーを設定する
shadowColor プロパティを使用します。
デフォルトは、"transparent black" です。
指定可能な値については、こちらで解説しています。
■シャドウのオフセット位置を設定する
以下のプロパティを使用します。
デフォルトは、0.0 です。
| プロパティ名 | 型 | 説明 |
| shadowOffsetX | Number | シャドウのオフセット x 座標を設定する |
| shadowOffsetY | Number | シャドウのオフセット y 座標を設定する |
■シャドウのぼかし量を設定する
shadowBlur プロパティを使用します。
デフォルトは、0.0 です。
■使用例
シャドウを設定する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 400;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
// ------------------------------------------------------------
context.fillStyle = "#ff6060";
// ------------------------------------------------------------
// テキストを設定する
// ------------------------------------------------------------
// テキストのフォントを設定する
context.font = "64px Meiryo";
// テキストの整列を設定する
context.textAlign = "left";
// テキストのベースラインを設定する
context.textBaseline = "top";
// ------------------------------------------------------------
// シャドウを設定する
// ------------------------------------------------------------
// シャドウカラーを設定する
context.shadowColor = "#202040";
// シャドウのオフセット位置を設定する
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
// シャドウのぼかし量を設定する
context.shadowBlur = 4;
// ------------------------------------------------------------
// テキストを描画する
// ------------------------------------------------------------
context.fillText( "表示テスト" , 10 , 10 );
ステートについて
■ステート関連の機能一覧
■メソッド
■描画設定の保存と復元について
■現在の描画設定を、スタックに保存する
save() メソッドを使用します。
現在の描画設定が、保存されます。
１回分の保存データが、ステートスタックに積まれます。
CanvasRenderingContext2D.save( ) :Void
| 引数 | Void | なし |
| 戻り値 | Void | なし |
■以前の描画設定を、スタックから復元する
restore() メソッドを使用します。
１回分の保存データが、ステートスタックから取り出されます。
描画設定は、save() メソッドを実行した時点まで復元されます。
CanvasRenderingContext2D.restore( ) :Void
| 引数 | Void | なし |
| 戻り値 | Void | なし |
■使用例
描画設定の保存と復元を確認する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 400;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "#ff0000";
// 矩形を描画する
context.fillRect( 0 , (20 * 0) , canvas.width , 15 );
// ------------------------------------------------------------
// 現在の描画設定を、スタックに保存する
context.save();
// 面の塗りを設定する（単一色）
context.fillStyle = "#00ff00";
// 矩形を描画する
context.fillRect( 0 , (20 * 1) , canvas.width , 15 );
// ------------------------------------------------------------
// 現在の描画設定を、スタックに保存する
context.save();
// 面の塗りを設定する（単一色）
context.fillStyle = "#0000ff";
// 矩形を描画する
context.fillRect( 0 , (20 * 2) , canvas.width , 15 );
// ------------------------------------------------------------
// 以前の描画設定を、スタックから復元する
context.restore();
// 矩形を描画する
context.fillRect( 0 , (20 * 3) , canvas.width , 15 );
// ------------------------------------------------------------
// 以前の描画設定を、スタックから復元する
context.restore();
// 矩形を描画する
context.fillRect( 0 , (20 * 4) , canvas.width , 15 );
描画した物をすべてクリアする
■矩形描画する（透明黒色で書き潰し）
clearRect() メソッドを使用します。
透明黒色（0x00000000）で描き潰します。
CanvasRenderingContext2D.clearRect ( x , y , w , h ) :Void
| 第01引数 | Number | 水平方向の位置を指定。（ローカル座標系） |
| 第02引数 | Number | 垂直方向の位置を指定。（ローカル座標系） |
| 第03引数 | Number | 幅を指定。 |
| 第04引数 | Number | 高さを指定。 |
| 戻り値 | Void | なし |
■描画した物をすべてクリアする場合
clearRect() メソッドは、トランスフォームの対象となります。
描画姿勢を変更している場合、単位行列でリセットします。
■描画した物をすべてクリアする関数
描画した物をすべてクリアする関数
// ------------------------------------------------------------
// 描画した物をすべてクリアする関数
// ------------------------------------------------------------
function Context2D_Clear(context){
var canvas = context.canvas;
context.save();
context.globalCompositeOperation = "source-over";
context.setTransform(1 , 0 , 0 , 1 , 0 , 0);
context.clearRect(0 , 0 , canvas.width , canvas.height);
context.restore();
}
描画パスについて
■描画パス関連の機能一覧
■描画パスのクリア
| メソッド | 説明 |
| beginPath() | 累積された描画パスをクリアする |
■サブパス追加のメソッド
| メソッド | 説明 |
| moveTo() | 新しいサブパスを開始する |
| lineTo() | サブパスを追加する（直線を追加） |
| quadraticCurveTo() | サブパスを追加する（２次ベジェ曲線を追加） |
| bezierCurveTo() | サブパスを追加する（３次ベジェ曲線を追加） |
| arc() | サブパスを追加する（円弧を追加） |
| arcTo() | サブパスを追加する（線角に円弧を追加） |
| closePath() | サブパスを閉じる（末尾から開始位置まで直線を追加） |
■図形追加のメソッド
| メソッド | 説明 |
| rect() | 描画パスを追加する（矩形を追加） |
■描画系メソッド
■累積された描画パスをクリアする
beginPath() メソッドを使用します。
CanvasRenderingContext2D.beginPath( ) :Void
| 引数 | Void | なし |
| 戻り値 | Void | なし |
■描画パスの解放漏れに注意
サブパスを追加し続けると、無制限にメモリに蓄積されていきます。
beginPath() メソッドを呼び忘れた場合、メモリリークとなります。
開放漏れを調べるには、一時的に半透明に設定します。
描画するたびに、既存の描画結果が濃くなる場合、解放漏れがあります。
描画パスの解放漏れを確認する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 描画スタイルを設定する
// ------------------------------------------------------------
// グローバルの透明度を設定する
context.globalAlpha = 0.1;
// ------------------------------------------------------------
// 線を描画する
// ------------------------------------------------------------
window.addEventListener( "click" , function(e){
// ------------------------------------------------------------
// 単一色の塗りを設定する
// ------------------------------------------------------------
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
context.fillStyle = "rgb(" + (r) + "," + (g) + "," + (b) + ")";
// ------------------------------------------------------------
// 描画パスをクリア（呼び出さなかった場合、累積された描画パスは解放されない）
// ------------------------------------------------------------
//context.beginPath();
// ------------------------------------------------------------
// 描画パスを追加（円描画）
// ------------------------------------------------------------
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var r = Math.random() * 80 + 20;
context.arc( x , y , r , 0 , (Math.PI * 2) );
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に面を描画する
// ------------------------------------------------------------
context.fill();
});
■新しいサブパスを開始する
moveTo() メソッドを使用します。
開始位置を指定します。
CanvasRenderingContext2D.moveTo( x , y ) :Void
| 引数 | Number | 開始位置となる、x 座標を指定する（ローカル座標系） |
| 引数 | Number | 開始位置となる、y 座標を指定する（ローカル座標系） |
| 戻り値 | Void | なし |
■サブパスを閉じる（末尾から開始位置まで直線を描画）
closePath() メソッドを使用します。
末尾から開始位置まで、直線が追加されます。
CanvasRenderingContext2D.closePath( ) :Void
| 引数 | Void | なし |
| 戻り値 | Void | なし |
■サブパスが暗黙的に閉じられる場合
サブパスは、他の手段でも閉じる事ができます。
この場合、末尾から開始位置まで、直線が描画される事はありません。
moveTo() メソッドを呼び出すと、以前のサブパスは閉じられます。
描画系のメソッドを呼び出すと、現在のサブパスは閉じられます。
■累積された描画パスを使って、実際に描画する
描画パスを実際に描画するには、以下のメソッドを使用します。
■累積された描画パスを使って、実際に線を描画する
stroke() メソッドを使用します。
CanvasRenderingContext2D.stroke( ) :Void
| 引数 | Void | なし |
| 戻り値 | Void | なし |
■累積された描画パスを使って、実際に面を描画する
fill() メソッドを使用します。
CanvasRenderingContext2D.fill( "fillRule" ) :Void
| 第01引数(略可) | String | 塗りつぶしルールを指定。デフォルトは、"nonzero" |
| 戻り値 | Void | なし |
■描画実行順序に注意
線と面は、一部重なっています。
呼び出す順番によって、描画結果は変わります。
■描画後に注意
描画した後も、累積された描画パスはそのまま残り続けます。
解放するには、beginPath() メソッドを使用します。
■塗りつぶしルールについて（Level2 以降）
塗りつぶしルールには、以下の種類があります。
デフォルトは、"nonzero" です。
| 文字列 | 説明 |
| "nonzero" | 描画パスの囲み方向が考慮されます。 時計回りとなる面１つ分を、(+1) とします。 反時計回りとなる面１つ分を、(-1) とします。 「複数の面が重なる部分」の合計結果が 0 となる場合、その部分の塗りは無しに変化します。 |
| "evenodd" | 面が偶数回重なった場合、塗りは無しに変化します。 面が奇数回重なった場合、塗りは有りに変化します。 |
直線を描画する
線描画の事前処理について
■描画スタイルを設定する
線の描画スタイルを設定します。
■描画姿勢を設定する
描画姿勢を設定します。
使用しない場合、単位行列でリセットします。
直線を描画する
１．開始位置を指定する
moveTo() メソッドを使用します。
２．サブパスを追加する（直線を追加）
lineTo() メソッドを使用します。
直前のサブパスと、今回のサブパスとの間に、直線を追加します。
CanvasRenderingContext2D.lineTo( x , y ) :Void
| 第01引数 | Number | x 座標を指定する（ローカル座標系） |
| 第02引数 | Number | y 座標を指定する（ローカル座標系） |
| 戻り値 | Void | なし |
３．直線を連続して追加する
lineTo() メソッドを繰り返し実行すると、連続して直線を追加できます。
途中で、線の描画スタイルを変更する事はできません。
４．実際に線を描画する
stroke() メソッドを使用します。
使用例
座標（20,40）から（200,100）まで線を引く
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 1.0;
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(255,0,0,1.0)";
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// 描画姿勢をリセットする（単位行列）
context.setTransform(1 , 0 , 0 , 1 , 0 , 0);
// ------------------------------------------------------------
// 線を描画する
// ------------------------------------------------------------
// 描画パスをクリア
context.beginPath();
// サブパスを開始（開始位置）
context.moveTo( 20.0 , 40.0 );
// サブパスを追加（直線追加）
context.lineTo( 200.0 , 100.0 );
// 累積された描画パスを使って、実際に線を描画する
context.stroke();
連続で線を引く
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 1.0;
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(255,0,0,1.0)";
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// 描画姿勢をリセットする（単位行列）
context.setTransform(1 , 0 , 0 , 1 , 0 , 0);
// ------------------------------------------------------------
// 線を描画する
// ------------------------------------------------------------
// 描画パスをクリア
context.beginPath();
// サブパスを開始（開始位置）
context.moveTo( 20.0 , 40.0 );
// サブパスを追加（直線追加）
context.lineTo( 100.0 , 100.0 );
// サブパスを追加（直線追加）
context.lineTo( 200.0 , 80.0 );
// サブパスを追加（直線追加）
context.lineTo( 300.0 , 150.0 );
// 累積された描画パスを使って、実際に線を描画する
context.stroke();
曲線を描画する
線描画の事前処理について
■描画スタイルを設定する
線の描画スタイルを設定します。
■描画姿勢を設定する
描画姿勢を設定します。
使用しない場合、単位行列でリセットします。
２次ベジェ曲線を描画する
１．開始位置を指定する
moveTo() メソッドを使用します。
２．サブパスを追加する（二次ベジェ曲線を追加）
quadraticCurveTo() メソッドを使用します。
２次ベジェ曲線は、「始端」「制御」「終端」の３つの座標で制御します。
CanvasRenderingContext2D.quadraticCurveTo( 制御X , 制御Y , 終端X , 終端Y ) :Void
| 第01引数 | Number | (制御座標) x 座標を指定する（ローカル座標系） |
| 第02引数 | Number | (制御座標) y 座標を指定する（ローカル座標系） |
| 第03引数 | Number | (終端座標) x 座標を指定する（ローカル座標系） |
| 第04引数 | Number | (終端座標) y 座標を指定する（ローカル座標系） |
| 戻り値 | Void | なし |
３．曲線を連続して追加する
quadraticCurveTo() メソッドを繰り返し実行すると、連続して曲線を追加できます。
途中で、線の描画スタイルを変更する事はできません。
４．実際に線を描画する
stroke() メソッドを使用します。
使用例
２次ベジェ曲線を描画する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 1.0;
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(255,0,0,1.0)";
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// 描画姿勢をリセットする（単位行列）
context.setTransform(1 , 0 , 0 , 1 , 0 , 0);
// ------------------------------------------------------------
// 線を描画する
// ------------------------------------------------------------
// ３つの座標
var pos0 = { x: 20.0 , y:280.0 };
var pos1 = { x:150.0 , y: 20.0 };
var pos2 = { x:400.0 , y:150.0 };
// 描画パスをクリア
context.beginPath();
// サブパスを開始（開始位置）
context.moveTo( pos0.x,pos0.y );
// サブパスを追加（２次ベジェ曲線追加）
context.quadraticCurveTo( pos1.x,pos1.y , pos2.x,pos2.y );
// 累積された描画パスを使って、実際に線を描画する
context.stroke();
３次ベジェ曲線を描画する
１．開始位置を指定する
moveTo() メソッドを使用します。
２．三次ベジェ曲線を描画する
bezierCurveTo() メソッドを使用します。
３次ベジェ曲線は、「始端」「制御１」「制御２」「終端」の４つの座標で制御します。
CanvasRenderingContext2D.bezierCurveTo( 制御1X , 制御1Y , 制御2X , 制御2Y , 終端X , 終端Y ) :Void
| 第01引数 | Number | (１つ目の制御座標) x 座標を指定する（ローカル座標系） |
| 第02引数 | Number | (１つ目の制御座標) y 座標を指定する（ローカル座標系） |
| 第03引数 | Number | (２つ目の制御座標) x 座標を指定する（ローカル座標系） |
| 第04引数 | Number | (２つ目の制御座標) y 座標を指定する（ローカル座標系） |
| 第05引数 | Number | (終端座標) x 座標を指定する（ローカル座標系） |
| 第06引数 | Number | (終端座標) y 座標を指定する（ローカル座標系） |
| 戻り値 | Void | なし |
３．曲線を連続して描画する
bezierCurveTo() メソッドを繰り返し実行すると、連続して曲線を描画できます。
途中で、線の描画スタイルを変更する事はできません。
４．実際に線を描画する
stroke() メソッドを使用します。
使用例
３次ベジェ曲線を描画する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 400;
canvas.height = 300;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 1.0;
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(255,0,0,1.0)";
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// 描画姿勢をリセットする（単位行列）
context.setTransform(1 , 0 , 0 , 1 , 0 , 0);
// ------------------------------------------------------------
// 線を描画する
// ------------------------------------------------------------
// ４つの座標
var pos0 = { x: 20.0 , y:280.0 };
var pos1 = { x:140.0 , y: 40.0 };
var pos2 = { x:300.0 , y:300.0 };
var pos3 = { x:380.0 , y: 20.0 };
// 描画パスをクリア
context.beginPath();
// サブパスを開始（開始位置）
context.moveTo( pos0.x,pos0.y );
// サブパスを追加（３次ベジェ曲線追加）
context.bezierCurveTo( pos1.x,pos1.y , pos2.x,pos2.y , pos3.x,pos3.y );
// 累積された描画パスを使って、実際に線を描画する
context.stroke();
円弧を描画する
線描画の事前処理について
■描画スタイルを設定する
線の描画スタイルを設定します。
■描画姿勢を設定する
描画姿勢を設定します。
使用しない場合、単位行列でリセットします。
円弧を描画する
１．サブパスを追加する（円弧を追加）
arc() メソッドを使用します。
このメソッドは、サブパスとして機能します。
「以前の位置」と「円弧の開始位置」との間には、直線が追加されます。
CanvasRenderingContext2D.arc( 中心X , 中心Y , 半径 , 開始角度 , 終端角度 , anticlockwise ) :Void
| 第01引数 | Number | (円の中心) x 座標を指定する（ローカル座標系） |
| 第02引数 | Number | (円の中心) y 座標を指定する（ローカル座標系） |
| 第03引数 | Number | 円の半径を指定する |
| 第04引数 | Number | 開始位置となる角度を指定する（単位：ラジアン） |
| 第05引数 | Number | 終端位置となる角度を指定する（単位：ラジアン） |
| 第06引数(略可) | Boolean | false で時計回り、true で反時計回り（デフォルトは false） |
| 戻り値 | Void | なし |
３．実際に線を描画する
stroke() メソッドを使用します。
■円周上の座標について
円周上の座標を計算する式は、以下の通りです。
円周上の座標を計算する
// ------------------------------------------------------------
// 円の情報
// ------------------------------------------------------------
var x = 100;
var y = 200;
var radius = 100;
var angle = (35.0) * (Math.PI / 180);
// ------------------------------------------------------------
// 円周上の座標を計算する
// ------------------------------------------------------------
var px = x + Math.cos(angle) * radius;
var py = y + Math.sin(angle) * radius;
使用例
円弧を描画する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 400;
canvas.height = 400;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 1.0;
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(255,0,0,1.0)";
// ------------------------------------------------------------
// 描画パスをクリア
// ------------------------------------------------------------
context.beginPath();
// ------------------------------------------------------------
// 描画パスを追加
// ------------------------------------------------------------
// サブパスを開始（開始位置）
context.moveTo(390 , 20);
// サブパスを追加（円弧を追加）
context.arc(200 , 200 , 150 , (0) * (Math.PI / 180) , (330) * (Math.PI / 180));
// サブパスを追加（直線を追加）
context.lineTo(380 , 10);
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に線を描画する
// ------------------------------------------------------------
context.stroke();
線角に円弧を描画する
１．開始位置を指定する
moveTo() メソッドを使用します。
２．線角に円弧を描画する
arcTo() メソッドを使用します。
直線を２回連続で引くと、線角が発生します。
線角部分に、円弧を配置する事ができます。
「以前の位置」と「円弧の開始位置」との間には、直線が追加されます。
CanvasRenderingContext2D.arcTo( 座標1X , 座標1Y , 座標2X , 座標2Y , 半径 ) :Void
| 第01引数 | Number | (線角の座標) x 座標を指定する（ローカル座標系） |
| 第02引数 | Number | (線角の座標) y 座標を指定する（ローカル座標系） |
| 第03引数 | Number | (次の直線の終端座標) x 座標を指定する（ローカル座標系） |
| 第04引数 | Number | (次の直線の終端座標) y 座標を指定する（ローカル座標系） |
| 第05引数 | Number | 線角とみなす半径を指定する |
| 戻り値 | Void | なし |
３．直線を追加する
lineTo() メソッドを使用します。
arcTo() メソッドの第03～04引数と同じ座標を指定します。
４．実際に線を描画する
stroke() メソッドを使用します。
使用例
線角に円弧を描画する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 400;
canvas.height = 300;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 1.0;
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(255,0,0,1.0)";
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// 描画姿勢をリセットする（単位行列）
context.setTransform(1 , 0 , 0 , 1 , 0 , 0);
// ------------------------------------------------------------
// 線角に円弧を描画する
// ------------------------------------------------------------
// ３つの座標
var pos0 = { x: 20.0 , y: 20.0 };
var pos1 = { x:330.0 , y: 80.0 };
var pos2 = { x:250.0 , y:250.0 };
// 描画パスをクリア
context.beginPath();
// サブパスを開始（開始位置）
context.moveTo( pos0.x,pos0.y );
// サブパスを追加（線角に円弧追加）
context.arcTo( pos1.x,pos1.y , pos2.x,pos2.y , 60.0 );
// サブパスを追加（直線追加）
context.lineTo( pos2.x,pos2.y );
// 累積された描画パスを使って、実際に線を描画する
context.stroke();
マウスで自由に線を描く
■マウスで自由に線を描く
１．マウスボタンの押下状態を取得する
以下のイベントを使用してマウスボタンの状態を監視します。
| イベント名 | 型 | 解説 |
| onmousedown | MouseEvent | マウスボタンを押した |
| onmouseup | MouseEvent | マウスボタンを離した |
２．マウスカーソルの位置を取得する
こちらで解説しています。
３．「クライアント座標」から「キャンバス座標」に変換する
こちらで解説しています。
４．ドラッグ操作中に直線を描画する
ドラッグ操作中であれば、「以前の位置」と「現在の位置」との間に、直線を描画します。
■実装例
ドラッグ操作で、線を描く
<html>
<body>
<canvas id="aaa" width="640" height="480" style="border:1px solid #000;" ></canvas>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// 「クライアント座標」から「キャンバス座標」に変換する関数
// ------------------------------------------------------------
function CanvasGetPositionFromClient(canvas,x,y){
var d = canvas.ownerDocument;
var w = d.defaultView;
var r = canvas.getBoundingClientRect();
var s = w.getComputedStyle(canvas,"");
var px = parseFloat(s.paddingLeft);
var py = parseFloat(s.paddingTop);
var bx = parseFloat(s.borderLeftWidth);
var by = parseFloat(s.borderTopWidth);
var sx = canvas.width / parseFloat(s.width);
var sy = canvas.height / parseFloat(s.height);
return {
x:(x - bx - px - r.left) * (sx),
y:(y - by - py - r.top ) * (sy)
};
}
// ------------------------------------------------------------
// "aaa" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var canvas = document.getElementById("aaa");
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の太さを設定する
context.lineWidth = 2.0;
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(0,0,0,1.0)";
// 線先の種類を設定する
context.lineCap = "round";
// 角の種類を設定する
context.lineJoin = "round";
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// 描画姿勢をリセットする（単位行列）
context.setTransform(1 , 0 , 0 , 1 , 0 , 0);
(function(){
// マウス座標のリスト
var mouse_pos_list = new Array();
// ------------------------------------------------------------
// マウスボタンを押すと実行されるイベント
// ------------------------------------------------------------
window.onmousedown = function(e){
// マウスカーソルの位置を取得
var pos = CanvasGetPositionFromClient(canvas , e.clientX , e.clientY );
// 座標リストを初期化 (要素数:1)
mouse_pos_list = [pos];
};
// ------------------------------------------------------------
// マウスボタンを離すと実行されるイベント
// ------------------------------------------------------------
window.onmouseup = function(e){
// 座標リストをクリア (要素数:0)
mouse_pos_list = new Array();
};
// ------------------------------------------------------------
// マウスカーソルを移動すると実行されるイベント
// ------------------------------------------------------------
window.onmousemove = function(e){
// ドラッグ操作中か
if(mouse_pos_list.length < 1) return;
// マウスカーソルの位置を取得
var pos = CanvasGetPositionFromClient(canvas , e.clientX , e.clientY );
// 座標リストに追加
mouse_pos_list.push(pos);
};
// ------------------------------------------------------------
// 一定の時間隔で実行する
// ------------------------------------------------------------
setInterval(function(){
// ------------------------------------------------------------
// 座標リストの総数
// ------------------------------------------------------------
var num = mouse_pos_list.length;
if(num < 2) return;
// ------------------------------------------------------------
// 描画パスをクリア
// ------------------------------------------------------------
context.beginPath();
// ------------------------------------------------------------
// 開始位置を指定する
// ------------------------------------------------------------
var pos = mouse_pos_list[0];
context.moveTo ( pos.x , pos.y );
// ------------------------------------------------------------
// 連続で直線を追加する
// ------------------------------------------------------------
var i;
for(i=1;i < num;i++){
pos = mouse_pos_list[i];
context.lineTo ( pos.x , pos.y );
}
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に線を描画する
// ------------------------------------------------------------
context.stroke();
// ------------------------------------------------------------
// 座標リストを初期化する
// ------------------------------------------------------------
mouse_pos_list = [pos];
},1000 / 60);
})();
//-->
</script>
</body>
</html>
サブパスで囲んで面を描画する
面描画の事前処理について
■描画スタイルを設定する
線の描画スタイルを設定します。
面の描画スタイルを設定します。
■描画姿勢を設定する
描画姿勢を設定します。
使用しない場合、単位行列でリセットします。
サブパスで囲んで面を描画する
１．サブパスを開始する
moveTo() メソッドを使用します。
２．サブパスを追加する
描画パスを指定する方法は、以下の種類があります。
何度か呼び出して、好きなだけ描画パスを増やします。
| メソッド名 | 説明 |
| lineTo() | サブパスを追加する（直線を追加） |
| quadraticCurveTo() | サブパスを追加する（２次ベジェ曲線を追加） |
| bezierCurveTo() | サブパスを追加する（３次ベジェ曲線を追加） |
| arc() | サブパスを追加する（円弧を追加） |
| arcTo() | サブパスを追加する（線角に円弧を追加） |
３．サブパスを閉じる
closePath() メソッドを使用します。
呼び出すと、末尾から開始位置まで、直線が追加されます。
面は暗黙的に閉じられます。
４．実際に面を描画する
fill() メソッドを使用します。
使用例
サブパスで囲んで面を描画する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 400;
canvas.height = 400;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(255,128,64,1.0)";
// 線の太さを設定する
context.lineWidth = 10.0;
// ------------------------------------------------------------
// 面の描画スタイルを設定する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(255,255,128,1.0)";
// ------------------------------------------------------------
// 描画パスをクリア
// ------------------------------------------------------------
context.beginPath();
// ------------------------------------------------------------
// 描画パスを追加（正円を追加）
// ------------------------------------------------------------
// サブパスを開始（開始位置）
context.moveTo ( 25.0 , 100.0 );
// サブパスを追加して囲む
context.lineTo ( 75.0 , 35.0 );
context.lineTo ( 165.0 , 55.0 );
context.lineTo ( 325.0 , 25.0 );
context.lineTo ( 375.0 , 95.0 );
context.lineTo ( 265.0 , 165.0 );
context.lineTo ( 205.0 , 135.0 );
context.lineTo ( 75.0 , 165.0 );
// サブパスを閉じる
context.closePath ();
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に描画する
// ------------------------------------------------------------
// 面描画
context.fill();
// 線描画
context.stroke();
パスで囲んで図形を描画する
■円を描画する
円を描画する
// ------------------------------------------------------------
// 描画パス（円）を追加する関数
// ------------------------------------------------------------
function Context2D_AddPath_Circle ( context , x , y , radius ) {
var q = 8; // 品質（8 で Flash の図形と同等）
var i;
var t;
var r = -Math.PI * 0.5;
var a = 1 / q * Math.PI * 2;
var p0;
var p1;
p0 = {
x:Math.cos(r) * radius,
y:Math.sin(r) * radius
};
context.moveTo (
x + (p0.x),
y + (p0.y)
);
for(i=0;i < q;i++){
r += a;
p1 = {
x:Math.cos(r) * radius,
y:Math.sin(r) * radius
};
t = -(p1.x * p0.x + p1.y * p0.y - (p1.x * p1.x + p1.y * p1.y)) / (p1.x * (-p0.y) + p1.y * p0.x);
context.quadraticCurveTo(
x + ((p0.x) + t * (-p0.y)),
y + ((p0.y) + t * ( p0.x)),
x + (p1.x),
y + (p1.y)
);
p0 = p1;
}
context.closePath();
return true;
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 640;
canvas.height = 480;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(0,0,0,1.0)";
// 線の太さを設定する
context.lineWidth = 5.0;
// ------------------------------------------------------------
// 面の描画スタイルを設定する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(128,128,128,1.0)";
// ------------------------------------------------------------
// 描画パスをクリア
// ------------------------------------------------------------
context.beginPath();
// ------------------------------------------------------------
// 描画パスを追加（円を追加）
// ------------------------------------------------------------
Context2D_AddPath_Circle ( context , 120.0 , 150.0 , 100.0 );
Context2D_AddPath_Circle ( context , 350.0 , 150.0 , 80.0 );
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に描画する
// ------------------------------------------------------------
// 面描画
context.fill();
// 線描画
context.stroke();
■正円を描画する
正円を描画する
// ------------------------------------------------------------
// 描画パス（正円）を追加する関数
// ------------------------------------------------------------
function Context2D_AddPath_TrueCircle(context,x,y,radius){
context.moveTo((x + radius) , y);
context.arc(x , y , radius , 0 , (Math.PI * 2));
context.closePath();
return true;
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 640;
canvas.height = 480;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(0,0,0,1.0)";
// 線の太さを設定する
context.lineWidth = 5.0;
// ------------------------------------------------------------
// 面の描画スタイルを設定する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(128,128,128,1.0)";
// ------------------------------------------------------------
// 描画パスをクリア
// ------------------------------------------------------------
context.beginPath();
// ------------------------------------------------------------
// 描画パスを追加（正円を追加）
// ------------------------------------------------------------
Context2D_AddPath_TrueCircle ( context , 120.0 , 150.0 , 100.0 );
Context2D_AddPath_TrueCircle ( context , 350.0 , 150.0 , 80.0 );
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に描画する
// ------------------------------------------------------------
// 面描画
context.fill();
// 線描画
context.stroke();
■楕円を描画する
楕円を描画する
// ------------------------------------------------------------
// 描画パス（楕円）を追加する関数
// ------------------------------------------------------------
function Context2D_AddPath_Ellipse ( context , x , y , width , height ) {
var q = 8; // 品質（8 で Flash の図形と同等）
var i;
var t;
var r = -Math.PI * 0.5;
var a = 1 / q * Math.PI * 2;
var p0;
var p1;
var sx;
var sy;
var radius;
if(width > height){
sx = width / height;
sy = 1.0;
radius = height * 0.5;
}else{
sx = 1.0;
sy = height / width;
radius = width * 0.5;
}
x += width * 0.5;
y += height * 0.5;
p0 = {
x:Math.cos(r) * radius,
y:Math.sin(r) * radius
};
context.moveTo (
x + (p0.x) * sx,
y + (p0.y) * sy
);
for(i=0;i < q;i++){
r += a;
p1 = {
x:Math.cos(r) * radius,
y:Math.sin(r) * radius
};
t = -(p1.x * p0.x + p1.y * p0.y - (p1.x * p1.x + p1.y * p1.y)) / (p1.x * (-p0.y) + p1.y * p0.x);
context.quadraticCurveTo(
x + ((p0.x) + t * (-p0.y)) * sx,
y + ((p0.y) + t * ( p0.x)) * sy,
x + (p1.x) * sx,
y + (p1.y) * sy
);
p0 = p1;
}
context.closePath();
return true;
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 640;
canvas.height = 480;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(0,0,0,1.0)";
// 線の太さを設定する
context.lineWidth = 5.0;
// ------------------------------------------------------------
// 面の描画スタイルを設定する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(128,128,128,1.0)";
// ------------------------------------------------------------
// 描画パスをクリア
// ------------------------------------------------------------
context.beginPath();
// ------------------------------------------------------------
// 描画パスを追加（楕円を追加）
// ------------------------------------------------------------
Context2D_AddPath_Ellipse ( context , 50.0 , 20.0 , 100.0 , 250.0 );
Context2D_AddPath_Ellipse ( context , 200.0 , 50.0 , 300.0 , 150.0 );
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に描画する
// ------------------------------------------------------------
// 面描画
context.fill();
// 線描画
context.stroke();
■角丸矩形を描画する
角丸矩形を描画する
// ------------------------------------------------------------
// 描画パス（角丸矩形）を追加する関数
// ------------------------------------------------------------
function Context2D_AddPath_RoundRect ( context , x , y , width , height , ellipseWidth , ellipseHeight ) {
if(ellipseHeight === undefined) ellipseHeight = ellipseWidth;
if(ellipseWidth > width ) ellipseWidth = width;
if(ellipseHeight > height) ellipseHeight = height;
var px;
var py;
var w0 = ellipseWidth * 0.5;
var h0 = ellipseHeight * 0.5;
var w1 = 0.707106781186548 * w0;
var h1 = 0.707106781186548 * h0;
var w2 = 0.414213562373095 * w0;
var h2 = 0.414213562373095 * h0;
px = x + width - w0;
py = y + h0;
context.moveTo ( px , py - h0 );
context.quadraticCurveTo ( px + w2 , py - h0 , px + w1 , py - h1 );
context.quadraticCurveTo ( px + w0 , py - h2 , px + w0 , py );
py = y + height - h0;
context.lineTo ( px + w0 , py );
context.quadraticCurveTo ( px + w0 , py + h2 , px + w1 , py + h1 );
context.quadraticCurveTo ( px + w2 , py + h0 , px , py + h0 );
px = x + w0;
context.lineTo ( px , py + h0 );
context.quadraticCurveTo ( px - w2 , py + h0 , px - w1 , py + h1 );
context.quadraticCurveTo ( px - w0 , py + h2 , px - w0 , py );
py = y + h0;
context.lineTo ( px - w0 , py );
context.quadraticCurveTo ( px - w0 , py - h2 , px - w1 , py - h1 );
context.quadraticCurveTo ( px - w2 , py - h0 , px , py - h0 );
context.closePath();
return true;
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 640;
canvas.height = 480;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(0,0,0,1.0)";
// 線の太さを設定する
context.lineWidth = 5.0;
// ------------------------------------------------------------
// 面の描画スタイルを設定する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(128,128,128,1.0)";
// ------------------------------------------------------------
// 描画パスをクリア
// ------------------------------------------------------------
context.beginPath();
// ------------------------------------------------------------
// 描画パスを追加（角丸矩形を追加）
// ------------------------------------------------------------
Context2D_AddPath_RoundRect ( context , 50.0 , 20.0 , 100.0 , 250.0 , 20 , 20 );
Context2D_AddPath_RoundRect ( context , 200.0 , 50.0 , 300.0 , 150.0 , 40 , 60 );
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に描画する
// ------------------------------------------------------------
// 面描画
context.fill();
// 線描画
context.stroke();
■正多角形を描画する
正多角形を描画する
// ------------------------------------------------------------
// 描画パス（正多角形）を追加する関数
// ------------------------------------------------------------
function Context2D_AddPath_RegularPolygon ( context , x , y , radius , vertex , angle ) {
if(vertex < 3) return false;
angle -= Math.PI * 0.5;
context.moveTo (
x + Math.cos(angle) * radius,
y + Math.sin(angle) * radius
);
var a = 1 / vertex * Math.PI * 2;
var i;
for(i=0;i < vertex;i++){
angle += a;
context.lineTo(
x + Math.cos(angle) * radius,
y + Math.sin(angle) * radius
);
}
context.closePath();
return true;
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 640;
canvas.height = 480;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(0,0,0,1.0)";
// 線の太さを設定する
context.lineWidth = 5.0;
// ------------------------------------------------------------
// 面の描画スタイルを設定する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(128,128,128,1.0)";
// ------------------------------------------------------------
// 描画パスをクリア
// ------------------------------------------------------------
context.beginPath();
// ------------------------------------------------------------
// 描画パスを追加（正多角形を追加）
// ------------------------------------------------------------
Context2D_AddPath_RegularPolygon ( context , 120.0 , 150.0 , 100.0 , 5 , 15.0 * (Math.PI/180) );
Context2D_AddPath_RegularPolygon ( context , 350.0 , 150.0 , 80.0 , 7 , 0.0 * (Math.PI/180) );
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に描画する
// ------------------------------------------------------------
// 面描画
context.fill();
// 線描画
context.stroke();
■星を描画する
星を描画する関数
// ------------------------------------------------------------
// 描画パス（星）を追加する関数
// ------------------------------------------------------------
function Context2D_AddPath_Star ( context , x , y , radius , vertex , angle , indent ) {
if(vertex < 3) return false;
vertex *= 2;
angle -= Math.PI * 0.5;
context.moveTo (
x + Math.cos(angle) * radius,
y + Math.sin(angle) * radius
);
var a = 1 / vertex * Math.PI * 2;
var r;
var i;
for(i=0;i < vertex;i++){
angle += a;
r = (i % 2) ? (radius):(radius * indent);
context.lineTo(
x + Math.cos(angle) * r,
y + Math.sin(angle) * r
);
}
context.closePath();
return true;
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 640;
canvas.height = 480;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(0,0,0,1.0)";
// 線の太さを設定する
context.lineWidth = 5.0;
// ------------------------------------------------------------
// 面の描画スタイルを設定する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(128,128,128,1.0)";
// ------------------------------------------------------------
// 描画パスをクリア
// ------------------------------------------------------------
context.beginPath();
// ------------------------------------------------------------
// 描画パスを追加（星を追加）
// ------------------------------------------------------------
Context2D_AddPath_Star ( context , 120.0 , 150.0 , 100.0 , 5 , 15.0 * (Math.PI/180) , 0.5 );
Context2D_AddPath_Star ( context , 350.0 , 150.0 , 80.0 , 7 , 0.0 * (Math.PI/180) , 0.8 );
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に描画する
// ------------------------------------------------------------
// 面描画
context.fill();
// 線描画
context.stroke();
矩形描画について
■矩形描画関連の機能一覧
■メソッド
| メソッド | 説明 |
| rect() | 描画パスを追加（矩形を追加） |
| メソッド | 説明 |
| strokeRect() | 矩形を描画する（線描画） |
| fillRect() | 矩形を描画する（面描画） |
| clearRect() | 矩形を描画する（透明黒色で書き潰し） |
矩形描画の事前処理について
■描画スタイルを設定する
線の描画スタイルを設定します。
面の描画スタイルを設定します。
■描画姿勢を設定する
描画姿勢を設定します。
使用しない場合、単位行列でリセットします。
■矩形を描画する
■矩形を描画する（線描画）
strokeRect() メソッドを使用します。
CanvasRenderingContext2D.strokeRect ( x , y , w , h ) :Void
| 第01引数 | Number | 水平方向の位置を指定。（ローカル座標系） |
| 第02引数 | Number | 垂直方向の位置を指定。（ローカル座標系） |
| 第03引数 | Number | 幅を指定。 |
| 第04引数 | Number | 高さを指定。 |
| 戻り値 | Void | なし |
■矩形を描画する（面描画）
fillRect() メソッドを使用します。
CanvasRenderingContext2D.fillRect ( x , y , w , h ) :Void
| 第01引数 | Number | 水平方向の位置を指定。（ローカル座標系） |
| 第02引数 | Number | 垂直方向の位置を指定。（ローカル座標系） |
| 第03引数 | Number | 幅を指定。 |
| 第04引数 | Number | 高さを指定。 |
| 戻り値 | Void | なし |
■使用例
矩形を描画する
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成する関数
// ------------------------------------------------------------
function SVGMatrixCreate(){
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
return svg.createSVGMatrix();
}
// ------------------------------------------------------------
// Context2D に SVGMatrix をセットする関数
// ------------------------------------------------------------
function Context2D_Set_SVGMatrix(context , mtx){
context.setTransform(mtx.a , mtx.b , mtx.c , mtx.d , mtx.e , mtx.f);
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 400;
canvas.height = 400;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(255,128,64,1.0)";
// 線の太さを設定する
context.lineWidth = 10.0;
// ------------------------------------------------------------
// 面の描画スタイルを設定する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(255,255,128,1.0)";
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成（単位行列）
var mtx = SVGMatrixCreate();
// 並行移動成分を合成
mtx = mtx.translate( 200.0 , 200.0 );
// 回転成分を合成
mtx = mtx.rotate( 15.0 );
// 拡大縮小成分を合成
mtx = mtx.scaleNonUniform( 1.0 , 1.0 );
// 描画姿勢を設定する
Context2D_Set_SVGMatrix(context , mtx);
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
var rect_w = 200;
var rect_h = 100;
var local_x = -(rect_w * 0.5);
var local_y = -(rect_h * 0.5);
// 矩形を描画（面描画）
context.fillRect( local_x , local_y , rect_w , rect_h );
// 矩形を描画（線描画）
context.strokeRect( local_x , local_y , rect_w , rect_h );
■描画パスを追加する（矩形を追加）
rect() メソッドを使用します。
CanvasRenderingContext2D.rect ( x , y , w , h ) :Void
| 第01引数 | Number | 水平方向の位置を指定。（ローカル座標系） |
| 第02引数 | Number | 垂直方向の位置を指定。（ローカル座標系） |
| 第03引数 | Number | 幅を指定。 |
| 第04引数 | Number | 高さを指定。 |
| 戻り値 | Void | なし |
■使用例
描画パスを使って、矩形を描画する
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成する関数
// ------------------------------------------------------------
function SVGMatrixCreate(){
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
return svg.createSVGMatrix();
}
// ------------------------------------------------------------
// Context2D に SVGMatrix をセットする関数
// ------------------------------------------------------------
function Context2D_Set_SVGMatrix(context , mtx){
context.setTransform(mtx.a , mtx.b , mtx.c , mtx.d , mtx.e , mtx.f);
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 400;
canvas.height = 400;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(255,128,64,1.0)";
// 線の太さを設定する
context.lineWidth = 10.0;
// ------------------------------------------------------------
// 面の描画スタイルを設定する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(255,255,128,1.0)";
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成（単位行列）
var mtx = SVGMatrixCreate();
// 並行移動成分を合成
mtx = mtx.translate( 200.0 , 200.0 );
// 回転成分を合成
mtx = mtx.rotate( 15.0 );
// 拡大縮小成分を合成
mtx = mtx.scaleNonUniform( 1.0 , 1.0 );
// 描画姿勢を設定する
Context2D_Set_SVGMatrix(context , mtx);
// ------------------------------------------------------------
// 描画パスをクリア
// ------------------------------------------------------------
context.beginPath();
// ------------------------------------------------------------
// 描画パスを追加（矩形を追加）
// ------------------------------------------------------------
var rect_w = 200;
var rect_h = 100;
var local_x = -(rect_w * 0.5);
var local_y = -(rect_h * 0.5);
context.rect( local_x , local_y , rect_w , rect_h );
// ------------------------------------------------------------
// 累積された描画パスを使って、実際に描画する
// ------------------------------------------------------------
// 面描画
context.fill();
// 線描画
context.stroke();
テキストを描画する
■テキスト描画関連の機能一覧
■プロパティ
| プロパティ名 | 型 | 説明 |
| font | String | テキストのフォントを設定する |
| textAlign | String | テキストの整列を設定する |
| textBaseline | String | テキストのベースラインを設定する |
| direction | String | テキストの方向を設定する |
■メソッド
| メソッド | 説明 |
| measureText() | テキストのサイズを測定する |
| strokeText() | テキストを線描画する |
| fillText() | テキストを面描画する |
■テキストのフォントを設定する
font プロパティを使用します。
デフォルトは、"10px sans-serif" です。
スタイルシートの font と同等です。
font-style, font-weight, font-size, font-family 等まとめて記述できます。
■使用例
テキストのフォントを設定する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 640;
canvas.height = 480;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// テキストの情報
// ------------------------------------------------------------
// テキストの位置
var text_pos = {x:100 , y:50};
// テキストの幅
var text_width = 100;
// ------------------------------------------------------------
// フォントの情報
// ------------------------------------------------------------
// フォントサイズ
var font_size = 48;
// フォントファミリー
var font_family = "sans-serif";
// ------------------------------------------------------------
// テキストのフォントを設定する
// ------------------------------------------------------------
context.font = (font_size) + 'px "' + (font_family) + '"';
//context.font = '10px "sans-serif"';
//context.font = 'italic bold 24px "Meiryo"';
// ------------------------------------------------------------
// テキストを設定する
// ------------------------------------------------------------
// テキストの整列を設定する
context.textAlign = "left";
// テキストのベースラインを設定する
context.textBaseline = "top";
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(255,224,224,1.0)";
// 矩形を面描画する
context.fillRect ( text_pos.x , text_pos.y , text_width , font_size );
// ------------------------------------------------------------
// テキストを描画する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(0,0,0,1.0)";
// テキストを面描画する
context.fillText ( "表示テスト" , text_pos.x , text_pos.y , text_width );
■テキストの整列を設定する
textAlign プロパティを使用します。
デフォルトは、"start" です。
■整列の種類について
以下の種類があります。
| 定数 | 説明 | 基点 |
| "left" or "start" | 左寄せ | 左端 |
| "right" or "end" | 右寄せ | 右端 |
| "center" | 中央揃え | 中央 |
■水平方向の基点について
テキストの整列を設定すると、水平方向の基点も変化します。
■テキストのベースラインを設定する
textBaseline プロパティを使用します。
デフォルトは、"alphabetic" です。
■ベースラインの種類について
以下の種類があります。
| 定数 | 説明 |
| "top" | 上端 |
| "middle" | 中央 |
| "bottom" | 下端 |
| 定数 | 説明 |
| "hanging" | Devanagari、Gurmukhi、ベンガル語（インド北部） |
| "alphabetic" | アルファベット用 |
| "ideographic" | 表意文字用 |
■垂直方向の基点について
ベースラインを設定すると、テキストの垂直方向の基点も変化します。
ベースラインの位置は、基点となります。
■テキストの方向を設定する（Level2 以降）
direction プロパティを使用します。
デフォルトは、"inherit" です。
■方向の種類について
以下の種類があります。
| 定数 | 説明 |
| "ltr" | 左から右へ (Left To Right) |
| "rtl" | 右から左へ (Right To Left) |
| "inherit" | 設定を継承する |
■テキストのサイズを測定する
measureText() メソッドを使用します。
CanvasRenderingContext2D.measureText ( "text" ) :TextMetrics
| 第01引数 | String | 描画したいテキストを指定。 |
| 戻り値 | TextMetrics | 新しい TextMetrics オブジェクトが得られる |
■ TextMetrics オブジェクトについて
以下のプロパティがあります。
| プロパティ名 | 型 | 説明 |
| width | Number | テキストの幅を取得する |
■使用例
テキストのサイズを測定する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 640;
canvas.height = 480;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// テキストの情報
// ------------------------------------------------------------
// テキスト文字列
var text = "表示テスト";
// テキストの位置
var text_pos = {x:20 , y:20};
// ------------------------------------------------------------
// フォントの情報
// ------------------------------------------------------------
// フォントサイズ
var font_size = 32;
// フォントファミリー
var font_family = "sans-serif";
// ------------------------------------------------------------
// テキストを設定する
// ------------------------------------------------------------
// テキストのフォントを設定する
context.font = (font_size) + 'px "' + (font_family) + '"';
// テキストの整列を設定する
context.textAlign = "left";
// テキストのベースラインを設定する
context.textBaseline = "top";
// ------------------------------------------------------------
// テキストのサイズを測定する
// ------------------------------------------------------------
// TextMetrics オブジェクトを取得する
var text_metrics = context.measureText ( text );
// テキストの幅を取得
var text_width = text_metrics.width;
// 出力テスト
console.log(text_width);
// ------------------------------------------------------------
// 矩形を描画する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(255,224,224,1.0)";
// 矩形を面描画する
context.fillRect ( text_pos.x , text_pos.y , text_width , font_size );
// ------------------------------------------------------------
// テキストを描画する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(0,0,0,1.0)";
// テキストを面描画する
context.fillText ( text , text_pos.x , text_pos.y );
テキスト描画の事前処理について
■描画スタイルを設定する
線の描画スタイルを設定します。
面の描画スタイルを設定します。
■描画姿勢を設定する
描画姿勢を設定します。
使用しない場合、単位行列でリセットします。
■シャドウを設定する
こちらで解説しています。
■テキストを描画する
■テキストを線描画する
strokeText() メソッドを使用します。
CanvasRenderingContext2D.strokeText ( "text" , x , y , maxWidth ) :Void
| 第01引数 | String | 描画したいテキストを指定。 |
| 第02引数 | Number | 水平方向の位置を指定。（ローカル座標系） |
| 第03引数 | Number | 垂直方向の位置を指定。（ローカル座標系） |
| 第04引数(略可) | Number | 最大幅を指定。テキストがこの幅を超えた場合、水平方向に縮小補正される。 |
| 戻り値 | Void | なし |
■テキストを面描画する
fillText() メソッドを使用します。
CanvasRenderingContext2D.fillText ( "text" , x , y , maxWidth ) :Void
| 第01引数 | String | 描画したいテキストを指定。 |
| 第02引数 | Number | 水平方向の位置を指定。（ローカル座標系） |
| 第03引数 | Number | 垂直方向の位置を指定。（ローカル座標系） |
| 第04引数(略可) | Number | 最大幅を指定。テキストがこの幅を超えた場合、水平方向に縮小補正される。 |
| 戻り値 | Void | なし |
■使用例
テキストを描画する
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成する関数
// ------------------------------------------------------------
function SVGMatrixCreate(){
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
return svg.createSVGMatrix();
}
// ------------------------------------------------------------
// Context2D に SVGMatrix をセットする関数
// ------------------------------------------------------------
function Context2D_Set_SVGMatrix(context , mtx){
context.setTransform(mtx.a , mtx.b , mtx.c , mtx.d , mtx.e , mtx.f);
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 640;
canvas.height = 480;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// テキスト文字列
// ------------------------------------------------------------
var text = "表示テスト";
// ------------------------------------------------------------
// フォントの情報
// ------------------------------------------------------------
// フォントの太さ
var font_weight = "bold";
// フォントサイズ
var font_size = 64;
// フォントファミリー
var font_family = "sans-serif";
// ------------------------------------------------------------
// テキストを設定する
// ------------------------------------------------------------
// テキストのフォントを設定する
context.font = (font_weight) + " " + (font_size) + 'px "' + (font_family) + '"';
// テキストの整列を設定する
context.textAlign = "left";
// テキストのベースラインを設定する
context.textBaseline = "top";
// ------------------------------------------------------------
// 線の描画スタイルを設定する
// ------------------------------------------------------------
// 線の塗りを設定する（単一色）
context.strokeStyle = "rgba(255,128,64,1.0)";
// 線の太さを設定する
context.lineWidth = 2.0;
// ------------------------------------------------------------
// 面の描画スタイルを設定する
// ------------------------------------------------------------
// 面の塗りを設定する（単一色）
context.fillStyle = "rgba(255,255,128,1.0)";
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成（単位行列）
var mtx = SVGMatrixCreate();
// 並行移動成分を合成
mtx = mtx.translate( 20.0 , 20.0 );
// 回転成分を合成
mtx = mtx.rotate( 5.0 );
// 拡大縮小成分を合成
mtx = mtx.scaleNonUniform( 1.0 , 1.0 );
// 描画姿勢を設定する
Context2D_Set_SVGMatrix(context , mtx);
// ------------------------------------------------------------
// テキストを描画する
// ------------------------------------------------------------
// テキストを面描画する
context.fillText ( text , 0 , 0 );
// テキストを線描画する
context.strokeText ( text , 0 , 0 );
イメージを描画する
■イメージ描画関連の機能一覧
■プロパティ
| プロパティ名 | 型 | 説明 |
| imageSmoothingEnabled | Boolean | イメージのスムージングを設定する |
■メソッド
| メソッド | 説明 |
| drawImage(image,dx,dy) | イメージを描画する（等倍） |
| drawImage(image,dx,dy,dw,dh) | イメージを描画する（サイズ指定） |
| drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) | 切り抜きイメージを描画する |
■イメージのスムージングを設定する（Level2 以降）
imageSmoothingEnabled プロパティを使用します。
false を指定した場合、ニアレストネイバーで表示されます。
true を指定した場合、バイリニアフィルタで表示されます。
デフォルトは、true です。
| false | true |
 |
 |
イメージ描画の事前処理について
■全体的な描画を設定する
透明度を設定します。
合成モード（コンポジット）を設定します。
■描画姿勢を設定する
描画姿勢を設定します。
使用しない場合、単位行列でリセットします。
■イメージを描画する
drawImage() メソッドを使用します。
このメソッドは、引数の指定数によって、動作が変化します。
■第01引数 (イメージソース)
以下のオブジェクトを、テクスチャとして利用できます。
| 型 | 説明 |
| HTMLImageElement | <IMG> 要素 |
| HTMLCanvasElement | <CANVAS> 要素 |
| HTMLVideoElement | <VIDEO> 要素 |
| ImageBitmap | 最適化済みテクスチャ |
■イメージを描画する（引数３つ）
第02～03引数から、描画位置を指定できます。
等倍サイズで描画されます。
CanvasRenderingContext2D.drawImage ( image , dx , dy ) :Void
| 第01引数 | * | イメージソースを指定。 |
| 第02引数 | Number | (描画位置) 水平方向の位置を指定。（ローカル座標系） |
| 第03引数 | Number | (描画位置) 垂直方向の位置を指定。（ローカル座標系） |
| 戻り値 | Void | なし |
■イメージを描画する（引数５つ）
第02～03引数から、描画位置を指定できます。
第04～05引数から、描画サイズを指定できます。
CanvasRenderingContext2D.drawImage ( image , dx , dy , dw , dh ) :Void
| 第01引数 | * | イメージソースを指定。 |
| 第02引数 | Number | (描画位置) 水平方向の位置を指定。（ローカル座標系） |
| 第03引数 | Number | (描画位置) 垂直方向の位置を指定。（ローカル座標系） |
| 第04引数 | Number | (描画サイズ) 幅を指定。 |
| 第05引数 | Number | (描画サイズ) 高さを指定。 |
| 戻り値 | Void | なし |
■切り抜きイメージを描画する（引数９つ）
第02～05引数から、イメージを切り抜く事ができます。
第06～07引数から、描画位置を指定できます。
第08～09引数から、描画サイズを指定できます。
CanvasRenderingContext2D.drawImage ( image , sx , sy , sw , sh , dx , dy , dw , dh ) :Void
| 第01引数 | * | イメージソースを指定。 |
| 第02引数 | Number | (切り抜き) 水平方向の位置を指定。（テクスチャ座標系） |
| 第03引数 | Number | (切り抜き) 垂直方向の位置を指定。（テクスチャ座標系） |
| 第04引数 | Number | (切り抜き) 幅を指定。 |
| 第05引数 | Number | (切り抜き) 高さを指定。 |
| 第06引数 | Number | (描画位置) 水平方向の位置を指定。（ローカル座標系） |
| 第07引数 | Number | (描画位置) 垂直方向の位置を指定。（ローカル座標系） |
| 第08引数 | Number | (描画サイズ) 幅を指定。 |
| 第09引数 | Number | (描画サイズ) 高さを指定。 |
| 戻り値 | Void | なし |
■使用例
イメージを描画する
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
canvas.height = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
// ------------------------------------------------------------
var image = new Image();
// ------------------------------------------------------------
// 読み込みに成功すると実行されるイベント
// ------------------------------------------------------------
image.onload = function (){
// ------------------------------------------------------------
// 全体的な描画を設定する
// ------------------------------------------------------------
// 透明度を設定する
context.globalAlpha = 1.0;
// 合成モード（コンポジット）を設定する
context.globalCompositeOperation = "source-over";
// ------------------------------------------------------------
// イメージのスムージングを設定する
// ------------------------------------------------------------
context.imageSmoothingEnabled = true;
// ------------------------------------------------------------
// イメージを描画する
// ------------------------------------------------------------
context.drawImage( image , 10 , 10 );
};
// ------------------------------------------------------------
// URL を指定して読み込みを開始する
// ------------------------------------------------------------
image.src = "http://example.com/graphics/texture_00.png";
切り抜きイメージを描画する
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成する関数
// ------------------------------------------------------------
function SVGMatrixCreate(a,b,c,d,e,f){
var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
var mtx = svg.createSVGMatrix();
if(a !== undefined) mtx.a = a;
if(b !== undefined) mtx.b = b;
if(c !== undefined) mtx.c = c;
if(d !== undefined) mtx.d = d;
if(e !== undefined) mtx.e = e;
if(f !== undefined) mtx.f = f;
return mtx;
}
// ------------------------------------------------------------
// Context2D に SVGMatrix をセットする関数
// ------------------------------------------------------------
function Context2D_Set_SVGMatrix(context , matrix){
context.setTransform(matrix.a,matrix.b,matrix.c,matrix.d,matrix.e,matrix.f);
}
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.createElement("canvas");
// キャンバスのサイズを設定する
canvas.width = 1000;
canvas.height = 1000;
// BODY のノードリストに登録する
document.body.appendChild(canvas);
// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// ------------------------------------------------------------
var context = canvas.getContext("2d");
// ------------------------------------------------------------
// HTMLImageElement オブジェクトを作成する
// ------------------------------------------------------------
var image = new Image();
// ------------------------------------------------------------
// 読み込みに成功すると実行されるイベント
// ------------------------------------------------------------
image.onload = function (){
// ------------------------------------------------------------
// 全体的な描画を設定する
// ------------------------------------------------------------
// 透明度を設定する
context.globalAlpha = 1.0;
// 合成モード（コンポジット）を設定する
context.globalCompositeOperation = "source-over";
// ------------------------------------------------------------
// 描画姿勢を設定する
// ------------------------------------------------------------
// SVGMatrix オブジェクトを作成（単位行列）
var mtx = SVGMatrixCreate();
// 並行移動成分を合成
mtx = mtx.translate( 200.0 , 200.0 );
// 回転成分を合成
mtx = mtx.rotate( 25.0 );
// 拡大縮小成分を合成
mtx = mtx.scaleNonUniform( 1.0 , 1.0 );
// 描画姿勢を設定する
Context2D_Set_SVGMatrix(context , mtx);
// ------------------------------------------------------------
// イメージのスムージングを設定する
// ------------------------------------------------------------
context.imageSmoothingEnabled = false;
// ------------------------------------------------------------
// イメージのクリッピングサイズ
// ------------------------------------------------------------
var image_rect = { x:10 , y:10 , width:100, height:100 };
// ------------------------------------------------------------
// 切り抜きイメージを描画する
// ------------------------------------------------------------
context.drawImage(
image,
image_rect.x,
image_rect.y,
image_rect.width,
image_rect.height,
-(image_rect.width * 0.5),
-(image_rect.height * 0.5),
image_rect.width,
image_rect.height
);
};
// ------------------------------------------------------------
// URL を指定して読み込みを開始する
// ------------------------------------------------------------
image.src = "http://example.com/graphics/texture_00.png";