Canvas に絵を描いてみる

HTML5 の Canvas に絵を描いてみました。

実行結果

ソース

キャンバスの id="no" （「の」です）に対し、直線と円弧のストロークを用いて、ひらがなの「の」を描いています。

canvas.js

window.onload = function() {
	// キャンバスとコンテキスト取得
	var canvas = document.querySelector('#no');
	var context = canvas.getContext('2d');
	// 塗りつぶし
	context.fillStyle = 'cyan';
	context.fillRect(0, 0, 300, 300);
	// 線を引く
	context.strokeStyle = 'black';
	context.lineWidth = 50;
	var r = 100;	// 半径
	var c = 150;	// 中心
	var a = Math.PI/3-0.2;
	var dx = r*Math.cos(a);
	var dy = r*Math.sin(a);
	var x = c + Math.floor(dx);
	var y = c - Math.floor(dy);
	// （直線の部分）
	context.beginPath();
	context.moveTo(x, y);
	dx = (r+23)*Math.cos(a);
	dy = (r+23)*Math.sin(a);
	x = c - Math.floor(dx);
	y = c + Math.floor(dy);
	context.lineTo(x, y);
	context.stroke();
	// （円弧の部分）
	context.beginPath();
	context.arc(c, c, r, Math.PI*2/3, Math.PI/3, false);
	context.stroke();
};

canvas.html

<script type="text/javascript" src="js/canvas.js"></script>

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