HTML5のcanvas APIで「○○えもん」を書いてみる！！

こんにちは、鯨井貴博@opensourcetechです。

今回はHTML5の勉強の為、

HTML5で「○○えもん」を書いてみようと思います。

使っているのは基本的には、

円、円弧、線を描くCanvas APIのみとなります。

※その他は一般的なHTMLやCSSとなるので、

　詳細は省かせて頂きます。

まず、以下の部分ですが、

canvas要素のオブジェクト及びコンテキストを取得しています。

-------

function DRW() {
   var CVS = document.getElementById("CVS");
   var CNT = CVS.getContext("2d");
   CNT.lineWidth = 7;　　　<-------こちらは線の太さを指定しています。

そして、円や円弧の描き方ですが、

以下の部分となります。

-------

    CNT.beginPath();　　　<-------線を描き始めることを宣言。
   var SANG = 0;　　　　<-------円弧の始点角度を定義
   var EANG = 360 * Math.PI / 180;　　<---------円弧の終点角度を定義
   CNT.arc(282.5, 200, 32.5, SANG, EANG, false);

<-------282.5:X方向の円の中心座標

200 :Y方向の円の中心座標

32.5 :円の半径

SANG:円弧の始点角度

EANG:円弧の終点角度

false:始点から時計回りで回転する

(trueで反時計回りで回転する)
CNT.stroke(); <-------円弧を書く命令

そして、線の描き方ですが、

以下の部分となります。

------

    CNT.beginPath();       <-------線の開始宣言
   CNT.moveTo(125, 175);　<---------------線の開始座標を指定
   CNT.lineTo(212.5, 212.5);　<------------線の終点座標を指定

ちなみに座標の軸ですが、

X方向(横方向)は右が正、

Y方向(縦方向)は下が正となります。

では、実際にHTML&CSSを使って○○えもんを描いてみます。

emon.html

-------

<!doctype html>
<html lang="ja">
<html><head>
<title>**EMON by HTML5</title>
<meta charset="UTF-8">
<script>
function DRW() {
   var CVS = document.getElementById("CVS");
   var CNT = CVS.getContext("2d");
   CNT.lineWidth = 7;
//circle1
   CNT.beginPath();
   var SANG = 0;
   var EANG = 180 * Math.PI / 180;
   CNT.arc(275, 250, 162.5, SANG, EANG, false);
   CNT.stroke();
//circle2
   CNT.beginPath();
   var SANG = 0;
   var EANG = 360 * Math.PI / 180;
   CNT.arc(282.5, 200, 32.5, SANG, EANG, false);
   CNT.stroke();
//circle3
   CNT.beginPath();
   var SANG = 312 * Math.PI / 180;
   var EANG = 245.5 * Math.PI / 180;
   CNT.arc(275, 300, 175, SANG, EANG, false);
   CNT.stroke();
//circle4
   CNT.beginPath();
   var SANG = 0;
   var EANG = 360 * Math.PI / 180;
   CNT.arc(347.5, 147.5, 50, SANG, EANG, false);
   CNT.stroke();
//circle5
   CNT.beginPath();
   var SANG = 0;
   var EANG = 360 * Math.PI / 180;
   CNT.arc(250, 125, 50, SANG, EANG, false);
   CNT.stroke();
//circle6
   CNT.beginPath();
   var SANG = 0;
   var EANG = 360 * Math.PI / 180;
   CNT.arc(275, 275, 225, SANG, EANG, false);
   CNT.stroke();
//circle7
   CNT.beginPath();
   var SANG = 180 * Math.PI / 180;
   var EANG = 0 * Math.PI / 180;
   CNT.arc(262.5, 125, 12.5, SANG, EANG, false);
   CNT.stroke();
//circle8
   CNT.beginPath();
   var SANG = 180 * Math.PI / 180;
   var EANG = 0 * Math.PI / 180;
   CNT.arc(325, 137.5, 12.5, SANG, EANG, false);
   CNT.stroke();
//line1
   CNT.beginPath();
   CNT.moveTo(125, 175);
   CNT.lineTo(212.5, 212.5);
//line2
   CNT.moveTo(87.5, 225);
   CNT.lineTo(212.5, 250);
//line3
   CNT.moveTo(100, 287.5);
   CNT.lineTo(212.5, 285);
//line4
   CNT.moveTo(425, 200);
   CNT.lineTo(325, 225);
//line5
   CNT.moveTo(437.5, 275);
   CNT.lineTo(325, 262.5);
//line6
   CNT.moveTo(437.5, 350);
   CNT.lineTo(325, 300);
//line7
   CNT.moveTo(237.5, 375);
   CNT.lineTo(275, 235);
//trace lines
   CNT.stroke();
}
</script>
<style>
p {
   color: blue;
   background-color: yellow;
   }
H1 {
   color: green;
   background-color: black;
   }
body {
   background-color: rgb(200,255,0);
   }
</style>
</head>
<body>
<H1>**EMON by HTML5</H1>
<p>Presented by yourname</p>
<input type="button" id="BTN" onclick="DRW()" value="Please click!!">
<canvas id="CVS" width="600" height="600">
</canvas>
</body>
</html>