HTML5 - Canvasで色々な絵をかく（ハートマークからパックマンまで）

Canvasリファレンスや、MDC Docsというやつのチュートリアルを参考に色々な絵をCanvasを使って書いてみよう。下の絵は全部他のサイトからパクってきたものだよ。ちゃんとパクリ先は明示しておきますよ。パクってきたのは、上2つのサイトですよ。HTML5 Canvasを使えば、ハートマークもマンガの吹き出しも、パックマンまでJavascript1つで描けるのだ。これでJavaScriptのTimer使えば、JavaScriptだけでアニメーションがつくれるのだ。もうFlashなんて不要だ。しかし、Canvasにはアニメーション機能がないので、Timerを使いながらすべてを消して全てを一から描写するというプロセスをアニメーションのコマ数分続けなくてはいけない為、あまり膨大なアニメーションをつくるのはお勧めできないらしい。膨大ってどのくらいなのかは分かりませんが、ゲームを作ろうと思ってもちょっと難しいのではないでしょうか？といっても、こんなことや、こんなこともできるらしい！すごい。

線を描く

<canvas id="canvas2" width="50" height="50"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas2");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, 40);
    ctx.lineTo(40, 40);
    ctx.lineTo(40, 0);
    ctx.closePath();
    ctx.stroke();
</script>

四角を描く

<canvas id="canvas3" width="50" height="50"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas3");
    var ctx = canvas.getContext("2d");
    ctx.fillRect(0,0,40,40);
</script>

ハートマークを描く

<canvas id="canvas4" width="140" height="140"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas4");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.fill();
</script>

マンガの吹き出しを描く

<canvas id="canvas5" width="140" height="140"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas5");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(75,25);
    ctx.quadraticCurveTo(25,25,25,62.5);
    ctx.quadraticCurveTo(25,100,50,100);
    ctx.quadraticCurveTo(50,120,30,125);
    ctx.quadraticCurveTo(60,120,65,100);
    ctx.quadraticCurveTo(125,100,125,62.5);
    ctx.quadraticCurveTo(125,25,75,25);
    ctx.stroke();
</script>