Twitter の #html5_dev_jp に触発され、
「はじめてのCanvas！」
ということでドロイド君を描いてみました。
以下のキャプチャは、Chromeで表示した結果。
以下のキャプチャは、Firefoxで表示した結果。
テキストエディタで書いて、ブラウザでReflesh！Reflesh！は、なんというか新感覚。
ちなみにFirefoxの結果が間違っているのは、わざと（半分嘘）。。。ということでお題にしておきます。
ちなみにHTML5の勉強にあたっては、以下のサイトを参考にさせていただきました。
超お勧めサイトです！
- HTML5.JP - 次世代HTML標準 HTML5情報サイト
http://www.html5.jp/
ソースコード
※テキストに貼って、hoge.htmlで保存し、HTML5対応のブラウザに放り込めば表示できます
<!DOCTYPE html>
<html>
<head>
<title>Droid</title>
<style>
body {
text-align: center
}
</style>
<!--[if IE]><script type="text/javascript" src="http://www.adakoda.com/excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
var ctx = document.getElementById('c').getContext('2d');
// 色（深緑）
ctx.strokeStyle = 'rgb(164, 199, 58)';
ctx.fillStyle = 'rgb(164, 199, 58)';
ctx.lineCap = "round";
// 線幅
ctx.lineWidth = 3;
// アンテナ？
ctx.beginPath();
ctx.moveTo(33, 5);
ctx.lineTo(43, 18);
ctx.moveTo(97, 5);
ctx.lineTo(87, 18);
ctx.stroke();
// 頭
ctx.beginPath();
ctx.moveTo(65, 50);
ctx.arc(65, 50, 40, Math.PI, 2 * Math.PI, false);
ctx.fill();
// 線幅
ctx.lineWidth = 18;
ctx.beginPath();
// 腕
ctx.moveTo(12, 50);
ctx.lineTo(12, 100);
ctx.moveTo(118, 50);
ctx.lineTo(118, 100);
// 足
ctx.moveTo(50, 100);
ctx.lineTo(50, 130);
ctx.moveTo(80, 100);
ctx.lineTo(80, 130);
// 胴体（下部）
ctx.moveTo(35, 100);
ctx.lineTo(95, 100);
ctx.stroke();
// 胴体（上部）
ctx.fillRect(25, 45, 80, 55);
// 色（白）
ctx.fillStyle = 'rgb(255, 255, 255)';
// 首
ctx.fillRect(25, 45, 80, 4);
// 目
ctx.arc(47, 30, 4, 0, 2 * Math.PI, false);
ctx.arc(83, 30, 4, 0, 2 * Math.PI, false);
ctx.fill()
};
</script>
</head>
<body>
<canvas id=c width=200 height=200></canvas>
</body>
</html>
あわせて読みたい
