Opensourcetechブログ(ZeusITCamp裏BLOG)

オープンソース技術 開発研究所による主にオープンソースに関するブログです。

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

 

こんにちは、オープンソース技術 開発研究所鯨井貴博です音譜

 f:id:opensourcetech:20140811122503p:plain

 

今回は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>



HTML5に対応したブラウザで開いてみると、

以下のようになります。


ボタンクリック前

-------

f:id:opensourcetech:20140924171829p:plain

 

ボタンクリック後

※実際の画像にはモザイクはかかっていませんので、ご注意下さい。

-------

f:id:opensourcetech:20140924171841p:plain

 

 

 

オープンソース技術 開発研究所

 f:id:opensourcetech:20140811122503p:plain

 

にほんブログ村 IT技術ブログ Linuxへ
Linux

にほんブログ村 IT技術ブログ オープンソースへ
オープンソース

footerのテストです