JavaScript プログラミング講座

 

Canvas 2D Context について

 


■Canvas 2D Context について

 
HTML5 世代の機能です。
 
http://www.w3.org/TR/2dcontext/ (Level 1) (Candidate Recommendation)
 
http://www.w3.org/TR/2dcontext2/ (Level 2) (Working Draft)
 
<CANVAS> 要素に、2Dの描画を行う事ができます。
 

■ CanvasRenderingContext2D オブジェクトを取得する

 
<CANVAS> 要素の、getContext() メソッドを使用します。
 
引数に、"2d" という文字列を指定します。
 
HTMLCanvasElement.getContext ( "2d" ) :CanvasRenderingContext2D
第01引数 Stringここでは、"2d" という文字列を指定。
戻り値 CanvasRenderingContext2DCanvasRenderingContext2D オブジェクトが得られる
 
<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" です。
 
以下の文字列を指定します。
 
■合成モード(コンポジット)の種類
 
A(source) は、新たに描き込むグラフィックです。
 
B(destination) は、これまでに描画されたグラフィックです。
 
文字列解説
"source-over"Bに対して、Aで上書きする
"destination-over"Aに対して、Bで上書きする
"source-in"Bの透過チャンネルを、Aに乗算する(Aのみ出力)
"destination-in"Aの透過チャンネルを、Bに乗算する(Bのみ出力)
"source-out"Bの透過チャンネルを反転し、Aに乗算する(Aのみ出力)
"destination-out"Aの透過チャンネルを反転し、Bに乗算する(Bのみ出力)
"source-atop"Bに対して、「 "source-in" の結果」で上書きする
"destination-atop"Aに対して、「 "destination-in" の結果」で上書きする
"lighter"AとBを加算合成する
"xor"AとBを XOR 合成する
"copy"Aのみ出力する(Bは無視)
 
■ブレンドモードの種類(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();

})();
 


 

線の描画スタイルについて

 
 


■線の描画スタイルの一覧

 
■プロパティ
 
プロパティ名説明
strokeStyleString
CanvasGradient
CanvasPattern
線の塗りを設定する(単一色、グラデーション、テクスチャ)
 
プロパティ名説明
lineWidthNumber線の太さを設定する
lineCapString線先の種類を設定する
lineJoinString角の種類を設定する
miterLimitNumberマイターの尖りの延長サイズを指定
lineDashOffsetNumber破線のオフセット値を指定
 
■メソッド
 
メソッド説明
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"角をラウンド結合
 
MITERBEVELROUND
 
■使用例
 
角の種類を設定する

// ------------------------------------------------------------
// 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();
 


 

面の描画スタイルについて

 
 


■面の描画スタイルの一覧

 
■プロパティ
 
プロパティ名説明
fillStyleString
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()円状グラデーション塗り
 

■線状グラデーションについて

 
1.CanvasGradient オブジェクトを作成する
 
createLinearGradient() メソッドを使用します。
 
開始側の位置と、終了側の位置を指定します。
 
CanvasRenderingContext2D.createLinearGradient ( x0 , y0 , x1 , y1 ) :CanvasGradient
第01引数 Number(開始側の位置) x 座標
第02引数 Number(開始側の位置) y 座標
第03引数 Number(終了側の位置) x 座標
第04引数 Number(終了側の位置) y 座標
戻り値 CanvasGradient新しい CanvasGradient オブジェクトが得られる。
 
2.グラデーションに色を追加する
 
addColorStop() メソッドを使用します。
 
最低でも1つは追加します。
 
■使用例
 
線状グラデーション塗りを使って、矩形を描画する

// ------------------------------------------------------------
// 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 );
 

■円状グラデーションについて

 
1.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 オブジェクトが得られる。
 
2.グラデーションに色を追加する
 
addColorStop() メソッドを使用します。
 
最低でも1つは追加します。
 
■使用例
 
円状グラデーション塗りを使って、矩形を描画する

// ------------------------------------------------------------
// 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引数 (単一色)
 
こちらで解説しています。
 

■テクスチャ塗りについて

 
1.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"タイリング描画しない
 
2.テクスチャの姿勢を設定する(Level2 以降)
 
setTransform() メソッドを使用します。
 
SVGMatrix オブジェクトを渡します。
 
CanvasPattern.setTransform ( matrix ) :Void
第01引数 SVGMatrixSVGMatrix オブジェクトを指定
戻り値 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 オブジェクトが得られます。
 

■新しい行列を設定する

 
setTransform() メソッドを使用します。
 
各プロパティについては、こちらで解説しています。
 
CanvasRenderingContext2D.setTransform ( a , b , c , d , e , f ) :Void
第01引数 Numberx 軸成分の x 座標 (a プロパティに相当)
第02引数 Numberx 軸成分の y 座標 (b プロパティに相当)
第03引数 Numbery 軸成分の x 座標 (c プロパティに相当)
第04引数 Numbery 軸成分の 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引数 Numberx 座標を指定。
第02引数 Numbery 座標を指定。
戻り値 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引数 Numberx 軸方向の拡大率を指定。(1.0 で等倍)
第02引数 Numbery 軸方向の拡大率を指定。(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引数 Numberx 軸成分の x 座標 (a プロパティに相当)
第02引数 Numberx 軸成分の y 座標 (b プロパティに相当)
第03引数 Numbery 軸成分の x 座標 (c プロパティに相当)
第04引数 Numbery 軸成分の 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();
 


 

シャドウについて

 
 


■シャドウ関連の機能一覧

 
■プロパティ
 
プロパティ名説明
shadowColorStringシャドウカラーを設定する
shadowOffsetXNumberシャドウのオフセット x 座標を設定する
shadowOffsetYNumberシャドウのオフセット y 座標を設定する
shadowBlurNumberシャドウのぼかし量を設定する
 

■シャドウの設定について

 
■シャドウカラーを設定する
 
shadowColor プロパティを使用します。
 
デフォルトは、"transparent black" です。
 
指定可能な値については、こちらで解説しています。
 
■シャドウのオフセット位置を設定する
 
以下のプロパティを使用します。
 
デフォルトは、0.0 です。
 
プロパティ名説明
shadowOffsetXNumberシャドウのオフセット x 座標を設定する
shadowOffsetYNumberシャドウのオフセット 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()現在の描画設定を、スタックに保存する
restore()以前の描画設定を、スタックから復元する
 

■描画設定の保存と復元について

 
■現在の描画設定を、スタックに保存する
 
save() メソッドを使用します。
 
現在の描画設定が、保存されます。
 
1回分の保存データが、ステートスタックに積まれます。
 
CanvasRenderingContext2D.save( ) :Void
引数 Voidなし
戻り値 Voidなし
 
■以前の描画設定を、スタックから復元する
 
restore() メソッドを使用します。
 
1回分の保存データが、ステートスタックから取り出されます。
 
描画設定は、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()サブパスを追加する(2次ベジェ曲線を追加)
bezierCurveTo()サブパスを追加する(3次ベジェ曲線を追加)
arc()サブパスを追加する(円弧を追加)
arcTo()サブパスを追加する(線角に円弧を追加)
closePath()サブパスを閉じる(末尾から開始位置まで直線を追加)
 
■図形追加のメソッド
 
メソッド説明
rect()描画パスを追加する(矩形を追加)
 
■描画系メソッド
 
メソッド説明
stroke()累積された描画パスを使って、実際に線を描画する
fill()累積された描画パスを使って、実際に面を描画する
 

■累積された描画パスをクリアする

 
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()累積された描画パスを使って、実際に線を描画する
fill()累積された描画パスを使って、実際に面を描画する
 
■累積された描画パスを使って、実際に線を描画する
 
stroke() メソッドを使用します。
 
CanvasRenderingContext2D.stroke( ) :Void
引数 Voidなし
戻り値 Voidなし
 
■累積された描画パスを使って、実際に面を描画する
 
fill() メソッドを使用します。
 
CanvasRenderingContext2D.fill( "fillRule" ) :Void
第01引数(略可)String塗りつぶしルールを指定。デフォルトは、"nonzero"
戻り値 Voidなし
 
■描画実行順序に注意
 
線と面は、一部重なっています。
 
呼び出す順番によって、描画結果は変わります。
 
■描画後に注意
 
描画した後も、累積された描画パスはそのまま残り続けます。
 
解放するには、beginPath() メソッドを使用します。
 

■塗りつぶしルールについて(Level2 以降)

 
塗りつぶしルールには、以下の種類があります。
 
デフォルトは、"nonzero" です。
 
文字列説明
"nonzero"描画パスの囲み方向が考慮されます。
時計回りとなる面1つ分を、(+1) とします。
反時計回りとなる面1つ分を、(-1) とします。
「複数の面が重なる部分」の合計結果が 0 となる場合、その部分の塗りは無しに変化します。
"evenodd"面が偶数回重なった場合、塗りは無しに変化します。
面が奇数回重なった場合、塗りは有りに変化します。
 


 
 

直線を描画する

 
 


線描画の事前処理について

 
■描画スタイルを設定する
 
線の描画スタイルを設定します。
 
■描画姿勢を設定する
 
描画姿勢を設定します。
 
使用しない場合、単位行列でリセットします。
 

直線を描画する

 
1.開始位置を指定する
 
moveTo() メソッドを使用します。
 
2.サブパスを追加する(直線を追加)
 
lineTo() メソッドを使用します。
 
直前のサブパスと、今回のサブパスとの間に、直線を追加します。
 
CanvasRenderingContext2D.lineTo( x , y ) :Void
第01引数 Numberx 座標を指定する(ローカル座標系)
第02引数 Numbery 座標を指定する(ローカル座標系)
戻り値 Voidなし
 
 
3.直線を連続して追加する
 
lineTo() メソッドを繰り返し実行すると、連続して直線を追加できます。
 
途中で、線の描画スタイルを変更する事はできません。
 
 
4.実際に線を描画する
 
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();
 


 

曲線を描画する

 
 


線描画の事前処理について

 
■描画スタイルを設定する
 
線の描画スタイルを設定します。
 
■描画姿勢を設定する
 
描画姿勢を設定します。
 
使用しない場合、単位行列でリセットします。
 

2次ベジェ曲線を描画する

 
1.開始位置を指定する
 
moveTo() メソッドを使用します。
 
2.サブパスを追加する(二次ベジェ曲線を追加)
 
quadraticCurveTo() メソッドを使用します。
 
2次ベジェ曲線は、「始端」「制御」「終端」の3つの座標で制御します。
 
CanvasRenderingContext2D.quadraticCurveTo( 制御X , 制御Y , 終端X , 終端Y ) :Void
第01引数 Number(制御座標) x 座標を指定する(ローカル座標系)
第02引数 Number(制御座標) y 座標を指定する(ローカル座標系)
第03引数 Number(終端座標) x 座標を指定する(ローカル座標系)
第04引数 Number(終端座標) y 座標を指定する(ローカル座標系)
戻り値 Voidなし
 
 
3.曲線を連続して追加する
 
quadraticCurveTo() メソッドを繰り返し実行すると、連続して曲線を追加できます。
 
途中で、線の描画スタイルを変更する事はできません。
 
4.実際に線を描画する
 
stroke() メソッドを使用します。
 
使用例
 
2次ベジェ曲線を描画する

// ------------------------------------------------------------
// 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);

// ------------------------------------------------------------
// 線を描画する
// ------------------------------------------------------------
// 3つの座標
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 );
// サブパスを追加(2次ベジェ曲線追加)
context.quadraticCurveTo( pos1.x,pos1.y , pos2.x,pos2.y );

// 累積された描画パスを使って、実際に線を描画する
context.stroke();
 

3次ベジェ曲線を描画する

 
1.開始位置を指定する
 
moveTo() メソッドを使用します。
 
2.三次ベジェ曲線を描画する
 
bezierCurveTo() メソッドを使用します。
 
3次ベジェ曲線は、「始端」「制御1」「制御2」「終端」の4つの座標で制御します。
 
CanvasRenderingContext2D.bezierCurveTo( 制御1X , 制御1Y , 制御2X , 制御2Y , 終端X , 終端Y ) :Void
第01引数 Number(1つ目の制御座標) x 座標を指定する(ローカル座標系)
第02引数 Number(1つ目の制御座標) y 座標を指定する(ローカル座標系)
第03引数 Number(2つ目の制御座標) x 座標を指定する(ローカル座標系)
第04引数 Number(2つ目の制御座標) y 座標を指定する(ローカル座標系)
第05引数 Number(終端座標) x 座標を指定する(ローカル座標系)
第06引数 Number(終端座標) y 座標を指定する(ローカル座標系)
戻り値 Voidなし
 
 
3.曲線を連続して描画する
 
bezierCurveTo() メソッドを繰り返し実行すると、連続して曲線を描画できます。
 
途中で、線の描画スタイルを変更する事はできません。
 
4.実際に線を描画する
 
stroke() メソッドを使用します。
 
使用例
 
3次ベジェ曲線を描画する

// ------------------------------------------------------------
// 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);

// ------------------------------------------------------------
// 線を描画する
// ------------------------------------------------------------
// 4つの座標
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 );
// サブパスを追加(3次ベジェ曲線追加)
context.bezierCurveTo( pos1.x,pos1.y , pos2.x,pos2.y , pos3.x,pos3.y );

// 累積された描画パスを使って、実際に線を描画する
context.stroke();
 


 

円弧を描画する

 
 


線描画の事前処理について

 
■描画スタイルを設定する
 
線の描画スタイルを設定します。
 
■描画姿勢を設定する
 
描画姿勢を設定します。
 
使用しない場合、単位行列でリセットします。
 

円弧を描画する

 
1.サブパスを追加する(円弧を追加)
 
arc() メソッドを使用します。
 
このメソッドは、サブパスとして機能します。
 
「以前の位置」と「円弧の開始位置」との間には、直線が追加されます。
 
CanvasRenderingContext2D.arc( 中心X , 中心Y , 半径 , 開始角度 , 終端角度 , anticlockwise ) :Void
第01引数 Number(円の中心) x 座標を指定する(ローカル座標系)
第02引数 Number(円の中心) y 座標を指定する(ローカル座標系)
第03引数 Number円の半径を指定する
第04引数 Number開始位置となる角度を指定する(単位:ラジアン)
第05引数 Number終端位置となる角度を指定する(単位:ラジアン)
第06引数(略可)Booleanfalse で時計回り、true で反時計回り(デフォルトは false)
戻り値 Voidなし
 
 
3.実際に線を描画する
 
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();
 

線角に円弧を描画する

 
1.開始位置を指定する
 
moveTo() メソッドを使用します。
 
2.線角に円弧を描画する
 
arcTo() メソッドを使用します。
 
直線を2回連続で引くと、線角が発生します。
 
線角部分に、円弧を配置する事ができます。
 
「以前の位置」と「円弧の開始位置」との間には、直線が追加されます。
 
CanvasRenderingContext2D.arcTo( 座標1X , 座標1Y , 座標2X , 座標2Y , 半径 ) :Void
第01引数 Number(線角の座標) x 座標を指定する(ローカル座標系)
第02引数 Number(線角の座標) y 座標を指定する(ローカル座標系)
第03引数 Number(次の直線の終端座標) x 座標を指定する(ローカル座標系)
第04引数 Number(次の直線の終端座標) y 座標を指定する(ローカル座標系)
第05引数 Number線角とみなす半径を指定する
戻り値 Voidなし
 
 
3.直線を追加する
 
lineTo() メソッドを使用します。
 
arcTo() メソッドの第03~04引数と同じ座標を指定します。
 
4.実際に線を描画する
 
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);

// ------------------------------------------------------------
// 線角に円弧を描画する
// ------------------------------------------------------------
// 3つの座標
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();
 


 

マウスで自由に線を描く

 


■マウスで自由に線を描く

 
1.マウスボタンの押下状態を取得する
 
以下のイベントを使用してマウスボタンの状態を監視します。
 
イベント名 解説
onmousedown MouseEvent マウスボタンを押した
onmouseup MouseEvent マウスボタンを離した
 
2.マウスカーソルの位置を取得する
 
こちらで解説しています。
 
3.「クライアント座標」から「キャンバス座標」に変換する
 
こちらで解説しています。
 
4.ドラッグ操作中に直線を描画する
 
ドラッグ操作中であれば、「以前の位置」と「現在の位置」との間に、直線を描画します。
 

■実装例

 
ドラッグ操作で、線を描く

<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>
 


 

サブパスで囲んで面を描画する

 


面描画の事前処理について

 
■描画スタイルを設定する
 
線の描画スタイルを設定します。
 
面の描画スタイルを設定します。
 
■描画姿勢を設定する
 
描画姿勢を設定します。
 
使用しない場合、単位行列でリセットします。
 

サブパスで囲んで面を描画する

 
1.サブパスを開始する
 
moveTo() メソッドを使用します。
 
2.サブパスを追加する
 
描画パスを指定する方法は、以下の種類があります。
 
何度か呼び出して、好きなだけ描画パスを増やします。
 
メソッド名 説明
lineTo()サブパスを追加する(直線を追加)
quadraticCurveTo()サブパスを追加する(2次ベジェ曲線を追加)
bezierCurveTo()サブパスを追加する(3次ベジェ曲線を追加)
arc()サブパスを追加する(円弧を追加)
arcTo()サブパスを追加する(線角に円弧を追加)
 
3.サブパスを閉じる
 
closePath() メソッドを使用します。
 
呼び出すと、末尾から開始位置まで、直線が追加されます。
 
面は暗黙的に閉じられます。
 
 
4.実際に面を描画する
 
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();
 


 

テキストを描画する

 
 


■テキスト描画関連の機能一覧

 
■プロパティ
 
プロパティ名説明
fontStringテキストのフォントを設定する
textAlignStringテキストの整列を設定する
textBaselineStringテキストのベースラインを設定する
directionStringテキストの方向を設定する
 
■メソッド
 
メソッド説明
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 オブジェクトについて
 
以下のプロパティがあります。
 
プロパティ名説明
widthNumberテキストの幅を取得する
 
■使用例
 
テキストのサイズを測定する

// ------------------------------------------------------------
// 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 );
 


 

イメージを描画する

 
 


■イメージ描画関連の機能一覧

 
■プロパティ
 
プロパティ名説明
imageSmoothingEnabledBooleanイメージのスムージングを設定する
 
■メソッド
 
メソッド説明
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最適化済みテクスチャ
 
■イメージを描画する(引数3つ)
 
第02~03引数から、描画位置を指定できます。
 
等倍サイズで描画されます。
 
CanvasRenderingContext2D.drawImage ( image , dx , dy ) :Void
第01引数 *イメージソースを指定。
第02引数 Number(描画位置) 水平方向の位置を指定。(ローカル座標系)
第03引数 Number(描画位置) 垂直方向の位置を指定。(ローカル座標系)
戻り値 Voidなし
 
■イメージを描画する(引数5つ)
 
第02~03引数から、描画位置を指定できます。
 
第04~05引数から、描画サイズを指定できます。
 
CanvasRenderingContext2D.drawImage ( image , dx , dy , dw , dh ) :Void
第01引数 *イメージソースを指定。
第02引数 Number(描画位置) 水平方向の位置を指定。(ローカル座標系)
第03引数 Number(描画位置) 垂直方向の位置を指定。(ローカル座標系)
第04引数 Number(描画サイズ) 幅を指定。
第05引数 Number(描画サイズ) 高さを指定。
戻り値 Voidなし
 
■切り抜きイメージを描画する(引数9つ)
 
第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";