Hatena::ブログ(Diary)

すだちニッキ Twitter

2012-12-12

いろふさん絵描き歌

いろふ Advent Calendarの12日目担当、ゆきーんです。
前日は@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);

f:id:lpczclt:20121209031229p:image

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

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

f:id:lpczclt:20121209031230p:image

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

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

f:id:lpczclt:20121209031231p:image

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

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

f:id:lpczclt:20121209032523p:image

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

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

f:id:lpczclt:20121209032947p:image

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

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

f:id:lpczclt:20121209033330p:image

でっきあがり!

f:id:lpczclt:20121209033541j:image:w300

本物

f:id:lpczclt:20121210192654p:image

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

明日は@bufferingsさんです。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/lpczclt/20121212/1355313517