js　canvas

円

<canvas id="canvasArea1" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea1');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}
ctx.beginPath();
ctx.strokeStyle = "#f00";
ctx.lineWidth = 5;
ctx.arc(60, 60, 50, 0, Math.PI*2, false);
ctx.stroke();

円：塗りつぶし

<canvas id="canvasArea2" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea2');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}
ctx.beginPath();
ctx.strokeStyle = "#f00";
ctx.lineWidth = "5";
ctx.fillStyle = "#ff0";
ctx.arc(60, 60, 50, 0, Math.PI*2, false);
ctx.stroke();
ctx.fill();

半円：塗りつぶし

<canvas id="canvasArea3" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea3');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}
ctx.beginPath();
ctx.strokeStyle = "#f00";
ctx.lineWidth = "5";
ctx.fillStyle = "#ff0";
ctx.arc(60, 60, 50, 0, Math.PI, true);
ctx.stroke();
ctx.fill();

矩形

<canvas id="canvasArea4" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea4');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}
ctx.beginPath();
ctx.strokeStyle = "#f00";
ctx.lineWidth = 5;
ctx.rect(10, 10, 100, 100);
ctx.stroke();

矩形：塗りつぶし

<canvas id="canvasArea5" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea5');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}
ctx.beginPath();
ctx.strokeStyle = "#f00";
ctx.lineWidth = 5;
ctx.fillStyle = "#ff0";
ctx.rect(10, 10, 100, 100);
ctx.stroke();
ctx.fill();

矩形：切り抜き

<canvas id="canvasArea6" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea6');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}
ctx.beginPath();
ctx.fillStyle = "#0ff";
ctx.fillRect(10, 10, 100, 100);
ctx.clearRect(20, 20, 50, 50);

線

<canvas id="canvasArea7" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea7');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.lineTo(10, 100);
ctx.lineTo(55, 55);
ctx.lineTo(10, 10);
ctx.stroke();

線：太線

<canvas id="canvasArea8" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea8');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}
ctx.beginPath();
ctx.strokeStyle = "#f00";
ctx.lineWidth = 5;
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.lineTo(10, 100);
ctx.lineTo(55, 55);
ctx.lineTo(10, 10);
ctx.stroke();

円弧

<canvas id="canvasArea9" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea9');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}
ctx.beginPath();
ctx.lineWidth = 5;
ctx.arc(60, 60, 50, Math.PI/2, Math.PI*3/2, true);
ctx.stroke();

ベジェ曲線

<canvas id="canvasArea10" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea10');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.bezierCurveTo(50, 200, 100, 10, 150, 200, 200, 10, 250, 200, 300, 10);
ctx.stroke();

フォント

<canvas id="canvasArea11" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea11');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}
// デフォルト
ctx.fillText('Text', 0, 30);

// フォント、サイズ指定
ctx.font = ('20px Meiryo');
ctx.fillText('Text', 0, 60);

// ボールド、イタリック
ctx.font = ('italic bold 20px Meiryo');
ctx.fillText('Text', 0, 90);

// ドロップシャドウ
ctx.font = ('40px Meiryo');
ctx.shadowColor = '#bbb';
ctx.shadowBlur = 1;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 1;
ctx.fillText('Text', 0, 140);

// 横の配置位置：右
ctx.font = ('20px Meiryo');
ctx.textAlign = 'right';
ctx.fillText('text', 80, 160);

// 横の配置位置：中央
ctx.font = ('20px Meiryo');
ctx.textAlign = 'center';
ctx.fillText('text', 80, 180);

// 横の配置位置：左
ctx.font = ('20px Meiryo');
ctx.textAlign = 'left';
ctx.fillText('text', 80, 200);

拡大・縮小

<canvas id="canvasArea12" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea12');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}

// デフォルト
ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI*2, false);
ctx.stroke();

// 拡大
ctx.beginPath();
ctx.scale(2, 1);
ctx.arc(60, 170, 50, 0, Math.PI*2, false);
ctx.stroke();

// 縮小
ctx.beginPath();
ctx.scale(0.5, 0.3);
ctx.arc(60, 840, 50, 0, Math.PI*2, false);
ctx.stroke();

回転

<canvas id="canvasArea13" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea13');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}

// デフォルト
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.fillStyle = '#f0f';
ctx.stroke();
ctx.fill();

// 45°回転
// 回転の起点がcanvasエリアの左上(0, 0)になる
ctx.beginPath();
ctx.rotate(45*Math.PI/180);
ctx.rect(200, 0, 100, 100);
ctx.fillStyle = '#f0f';
ctx.stroke();
ctx.fill();

移動

<canvas id="canvasArea14" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea14');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}

// デフォルト
ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI*2, false);
ctx.stroke();

// 110px右移動
ctx.beginPath();
ctx.translate(110, 0);
ctx.arc(60, 60, 50, 0, Math.PI*2, false);
ctx.stroke();

画像描画

<canvas id="canvasArea15" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea15');
if(canvas.getContext) {
	var ctx = canvas.getContext('2d');
}

var img = new Image();
img.src = 'http://html5exam.jp/images/header/header_logo.png';
img.onload = function() {
	ctx.drawImage(img, 10, 10);
}

canvas => 画像 変換

<canvas id="canvasArea16" width="300" height="300"></canvas>
<img id="image">

var canvas2 = document.getElementById('canvasArea16');
if(canvas2.getContext) {
	var ctx2 = canvas2.getContext('2d');
}
ctx2.beginPath();
ctx2.arc(60, 60, 50, 0, Math.PI*2, false);
ctx2.fillStyle = '#f00';
ctx2.stroke();
ctx2.fill();

// 画像変換
var img2 = canvas2.toDataURL();
// img要素への変換したファイルの追加
document.getElementById('image').src = img2;

画像エフェクト：グレースケール

<canvas id="canvasArea17" width="300" height="300"></canvas>

var canvas = document.getElementById('canvasArea17');
if(canvas.getContext) {
	var ctx3 = canvas.getContext('2d');
}

var img3 = new Image();
// cross origin ではない画像を指定
img3.src = 'header_logo.png';
img3.onload = function() {
	ctx3.drawImage(img3, 10, 10);
	setTimeout(function() {
		// 改めて画像として取得
		var newImg = ctx3.getImageData(0, 0, canvas.width, canvas.height);
		var data = newImg.data;
		// グレースケール化
		for(var i = 0; i < data.length; i += 4) {
			var color = (data[i] + data[i + 1] + data[i + 2]) / 3;
			data[i] = color;
			data[i + 1] = color;
			data[i + 2] = color;
		}
		// canvas上に描画
		ctx3.putImageData(newImg, 0, 0);
		// 1秒後に変化
	}, 1000);
}

画像エフェクト：色の反転

<canvas id="canvasArea18" width="300" height="300"></canvas>

var canvas2 = document.getElementById('canvasArea18');
if(canvas2.getContext) {
	var ctx4 = canvas2.getContext('2d');
}

var img4 = new Image();
// cross origin ではない画像を指定
img4.src = 'header_logo.png';
img4.onload = function() {
	ctx4.drawImage(img4, 10, 10);
	setTimeout(function() {
		// 改めて画像として取得
		var newImg2 = ctx4.getImageData(0, 0, canvas2.width, canvas2.height);
		var data = newImg2.data;
		// 反転
		for(var i = 0; i < data.length; i += 4) {
			data[i] = 255 - data[i];
			data[i + 1] = 255 - data[i + 1];
			data[i + 2] = 255 - data[i + 2];
		}
		// canvas上に描画
		ctx4.putImageData(newImg2, 0, 0);
		// 1秒後に変化
	}, 1000);
}