いろふさん絵描き歌

いろふ Advent Calendarの１２日目担当、ゆきーんです。
前日は@masafumi_ohtaさんのI don”t know ‘irof-san’ but I know ‘roifadm’.(Just kidding for Japan Java UG :-p)です。

歌います。

これっくらいの♪canvasにっ♪

var canvas = document.getElementById('irof');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 5;
ctx.fillStyle = "#FFF";
ctx.strokeRect(0, 0, 300, 300);

ぐるっと輪郭ちょっと描いて♪

ctx.beginPath();
ctx.lineWidth = 10;
ctx.arc(242,250,117,172 * Math.PI / 180, 214 * Math.PI / 180,true);
ctx.stroke();

ぱっくぱっく開いたお口をつっけて♪

ctx.lineTo(210, 255);
ctx.closePath();
ctx.stroke();

ふっきだっしはっ♪ベッジェきょっくせんっ♪

ctx.beginPath();
ctx.moveTo(50, 30);
ctx.lineTo(153, 30);
ctx.arc(153, 60, 30, 270 * Math.PI / 180, 90 * Math.PI / 180, false);
ctx.lineTo(105, 90);
ctx.bezierCurveTo(105, 90, 90, 105, 129, 141);
ctx.bezierCurveTo(90, 135, 66, 120, 81, 90);
ctx.lineTo(57,90);
ctx.arc(50, 60, 30, 90 * Math.PI / 180, 270 * Math.PI / 180, false);
ctx.stroke();

点、点、点、点、つっぶやっいて♪

ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(51, 60, 5, 0, Math.PI * 2 ,true);
ctx.arc(84, 60, 5, 0, Math.PI * 2 ,true);
ctx.arc(120, 60, 5, 0, Math.PI * 2 ,true);
ctx.arc(154, 60, 5, 0, Math.PI * 2 ,true);
ctx.fill();

あーなを開ーけたらいろふさん♪

ctx.beginPath();
ctx.arc(255,204,15,0,Math.PI * 2,true);
ctx.stroke();

でっきあがり！

本物

座標計算には@kawakawaさんのExcel方眼紙の世界にいろふさん（@irof）をご招待してみようを参考にさせていただきました。
やはりExcel方眼紙は素晴らしいですね！

明日は@bufferingsさんです。