Skip to content

Instantly share code, notes, and snippets.

@kazuhito-m

kazuhito-m/irof_ekakiuta.html

Created December 12, 2012 13:35
Show Gist options
  • Save kazuhito-m/4267757 to your computer and use it in GitHub Desktop.
Save kazuhito-m/4267757 to your computer and use it in GitHub Desktop.
Download ZIP
「いろふさん絵描き歌」の実際動く版。 @yukieen #irof_history http://d.hatena.ne.jp/lpczclt/20121212/ By いろふ Advent Calendar http://atnd.org/events/34079
Raw
irof_ekakiuta.html
<html>
<head><title>いろふ絵描き歌</title></head>
<body>
<canvas id="irof" width="300" height="300"></canvas>
<script type="text/javascript">
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();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment