JavaScript で 家紋を描こう！
YouTube連動記事
この記事はYouTube連動記事です。動画のほうでも紹介していますのであわせてご確認ください。
【YouTube】 JavaScript で 家紋を描こう！
●各ソースへのリンク
01.ファイルの新規作成
デスクトップで何もないところを右クリックして右クリックメニュー → 新規作成 →
テキストドキュメントをクリックします。
ファイル名は「Kamon.txt」としておきます。
作成されたテキストドキュメントについて
ファイル名に拡張子「.txt」が表示されていない場合は 表示するようにしてください。
もし表示されてない方は
エクスプローラ → 表示 → フォルダ→オプション → 表示タブ 登録されている拡張子を表示しない
のチェックを外すで 「.txt」が表示されます。
次に拡張子を変更します
ファイルを右クリックし 右クリックメニュー → 名前の変更
で拡張子を変更します
「拡張子を変更するとファイルが使えなくなる可能性があります。変更しますか」とでます。
「はい」を押します。
kamon.htmlファイルのアイコンが変わります。
これはテキストファイルから ブラウザで開くHTMLファイルに変わったことを示しています。
02.HTML基本部分の作成
kamon.htmlのファイルを開きます。先ほど拡張子をHTMLにしたのでダブルクリックするとブラウザが開きます。
なのでこの状態でプログラムを変更するには
右クリックメニューから
プログラムから開く→サクラエディタです
まずHTMLの基本部分を打ち込みます
インデントに注意しながら入力してみてください。
タイトルは今回家紋を描こうというテーマなので「kamon」としておきます。
bodyの中には、canvasタグをひとつ書きます。
ダウンロード コピーできました！
kamon_01.html
<html>
<head>
<title>
kamon
</title>
</head>
<body>
<canvas id="kamonCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
canvas タグは少し特殊なタグです
他のタグと違い、canvasタグには直接絵を描くことができます。
ファイルをダブルクリックしてみましょう。
ブラウザが開きます。
ブラウザの中は 四角い枠が表示されていれば成功です
もしお手本通りにうまく行かない方は 上記プログラムソースをコピーしてファイル保存して 比較してみてください。
どうしてもわからないっていう場合は
お手本と比較してみようの動画もありますのでそちらも参考にしてみてください。
「ファイル比較でプログラムの間違い探しがカンタンに！
ウィンマージ(WinMerge)をインストールしよう！」
よくある間違いとしては、カッコが全角になっていたりとか スペースが全角になっていたりといったところです。
03.画面の使い方
パソコンの画面の使い方についてブラウザとテキストエディタを左右に並べると分かりやすくなります。
プログラムを左で書いたら右で動きを確認です。
左右逆でもかまいません。
04.描画関数を作る
JavaScriptを書くためにscriptタグを書きます<script> <!-- --> </script>
scriptタグの中に関数を書きます
「家紋を描く関数」です
function drawKamon(){
}
次にdrawKamonを呼び出す部分を書いていきます
bodyタグに onload の処理を書きます
<body onload="drawKamon()">
onload は HTMLのページ読み込み後に
自動で呼ばれる処理です
さて drawKamon() 関数の中も書きます
const canvas = document.getElementById("kamonCanvas");
const ctx = canvas.getContext("2d");
document.getElementById("kamonCanvas") は
kamonCanvas というIDの要素（タグのデータ）を取得するよって意味ですね
取得した要素はcanvasという変数に代入されます
変数宣言は通常はvar や let を使って宣言しますが
ここではconstを使って宣言しています
varやletは一度変数宣言すれば
違う値をいれてなんども使いまわすことができます
これと違ってconstは
一回しか値を代入できません。
なので
使いまわししたくない変数
もしくは
使いまわしするとバグが起こりやすい変数を宣言するときに
constを使います
つづいて
canvas.getContext("2d");
の部分ですが
これは「コンテキスト」を取得しています
コンテキストは言い回しが難しいのですが
画面に絵を描くためにいろいろな情報がつまったものです
canvsを使うときの決まり文句として覚えて頂いて大丈夫です
次の行から絵を描く処理「描画処理」を書いていきます
ctx.rect(2, 2, 50, 50); ctx.fillStyle = "#00FF00"; ctx.fill();
これは、「ほんとに描画できるのかな、どうかなというのを試すために
書いた３行です
四角形を描画する処理です
ctx.rect(2, 2, 50, 50);
のrectはrectangleのことで、長方形を意味しています。
2,2,50,50 と引数が指定されています
これはそれぞれ
第１引数・・・四角形の左上のx座標
第２引数・・・四角形の左上のy座標
第３引数・・・四角形の幅
第４引数・・・四角形の高さ
です。
四角形の幅と高さにそれぞれ50を指定しているので
形としては50ピクセルの正方形になります
ctx.fillStyle = "#00FF00";
fillは塗りつぶしのことです。
fillStyleで塗りつぶしの色を指定することができます
#00FF00の色の指定方法はCSSの書き方と同じものです
RGBですね
真ん中の緑の濃度を「FF」で最大値に指定しているので
緑色になります
ctx.fill();
これは塗りつぶし処理を実行しますという意味です
ダウンロード コピーできました！
kamon_02.html
<html>
<head>
<title>
kamon
</title>
<script>
<!--
function drawKamon(){
const canvas = document.getElementById("kamonCanvas");
const ctx = canvas.getContext("2d");
ctx.rect(2, 2, 50, 50);
ctx.fillStyle = "#00FF00";
ctx.fill();
}
-->
</script>
</head>
<body onload="drawKamon()">
<canvas id="kamonCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
05.線をつないで描く
さて、さっき書いた四角形はお試しで書いたものですなのでさっき書いた３行は消します
ctx.rect(2, 2, 50, 50); ctx.fillStyle = "#00FF00"; ctx.fill();
で 次の６行を書きます
ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(180, 80); ctx.lineTo(60, 200); ctx.closePath(); ctx.fill();
ctx.beginPath();
beginPath()関数ですが
Pathはお絵描きソフトでよく使われてるパスのことです
任意の点をつないで絵を描くやつですね
なのでbeginPathは「パスを描き始めるよ」ってことです
次の行
ctx.moveTo(100, 100);
これは最初の点を決める関数です
引数に100,100を指定しています
x座標 100、y座標 100 を示しています
次の行
ctx.lineTo(180, 80);
これは最初の点から次の点へ直線でつなぐ関数です
ここでは
さっき最初の点100,100から次の点180, 80につないでいます
次の行
ctx.lineTo(60, 200);
ここも次の点へ直線でつなぐ関数です。
さっきの点180, 80から次の点60, 200につないでいます
次の行
ctx.closePath();
パスを閉じます
次の行
ctx.fill();
これは塗りつぶしです
パスでつないだ線の中を塗りつぶします
ダウンロード コピーできました！
kamon_03.html
<html>
<head>
<title>
kamon
</title>
<script>
<!--
function drawKamon(){
const canvas = document.getElementById("kamonCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(180, 80);
ctx.lineTo(60, 200);
ctx.closePath();
ctx.fill();
}
-->
</script>
</head>
<body onload="drawKamon()">
<canvas id="kamonCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
06.二等辺三角形
さて三角形の描画までできるようになりました
今回のプログラムで作りたいのは
ミツウロコの家紋です
ミツウロコの家紋は2等辺三角形が３つあります。
ミツウロコの家紋
３つあるうちの
まずは2等辺三角形を１つ書いていきたいと思います
まず先ほどかいた三角形の座標を変えていきます
ひとつめの頂点をきめます
今回は150, 70 とします
ここから右下と左下に同じ長さで辺を書きます
右下の頂点は
最初の頂点から +50、+50
左下の頂点は
最初の頂点から -50、+50
とします
最初の頂点150, 70をx,yとして変数宣言します
右下の頂点は
最初の頂点から x+50、y+50
左下の頂点は
最初の頂点から x-50、y+50
で計算できます
ダウンロード コピーできました！
kamon_04.html
<html>
<head>
<title>
kamon
</title>
<script>
<!--
function drawKamon(){
const canvas = document.getElementById("kamonCanvas");
const ctx = canvas.getContext("2d");
var x = 150;
var y = 70;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + 50, y + 50);
ctx.lineTo(x - 50, y + 50);
ctx.closePath();
ctx.fill();
}
-->
</script>
</head>
<body onload="drawKamon()">
<canvas id="kamonCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
07.大きさを変数にする
ここでプログラムをちょっと調整します。
いま50を指定しているところ。
なんども50を書いています
あとで大きさを変えたくなったらすべての50を
変更する必要がでてきます。
なので50も変数にします。
まず変数宣言します。
var size = 50;
つぎにそれぞれ50と書いているところを
すべてsizeに変えます
ダウンロード コピーできました！
kamon_05.html
<html>
<head>
<title>
kamon
</title>
<script>
<!--
function drawKamon(){
const canvas = document.getElementById("kamonCanvas");
const ctx = canvas.getContext("2d");
var x = 150;
var y = 70;
var size = 50;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + size, y + size);
ctx.lineTo(x - size, y + size);
ctx.closePath();
ctx.fill();
}
-->
</script>
</head>
<body onload="drawKamon()">
<canvas id="kamonCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
ここでは表示が変わっていなければ成功です
08.三角形を描画する関数
まだちょっとプログラムを調整します。
ミツウロコは三角形がみっつあります。
なので今書いた二等辺三角形を３回書けば
ミツウロコは完成になるはずです。
しかし
プログラミングでは同じ処理が何回もでてくるなら
なるべく一つにまとめるのがマナーです。
なので
二等辺三角形を描く関数を作ります
function drawTriangle(ctx, x, y, size){
}
関数名は三角形を描くという意味で
drawTriangleとしました
引数は４つです
第１引数・・・コンテキスト
コンテキストは描画に必要な情報のことですね
第２引数・・・起点となる頂点の x座標
第３引数・・・起点となる頂点の y座標
第２第３引数は起点となる頂点の x座標 y座標です
第４引数・・・サイズ
最初に50で指定していたsizeです
次にdrawKamon()の中で行っていた
描画の処理を
drawTriangle()の中に引っ越します
そのあと
drawKamon()の中に
drawTriangle()を呼び出す処理をいれます
ダウンロード コピーできました！
kamon_06.html
<html>
<head>
<title>
kamon
</title>
<script>
<!--
function drawKamon(){
const canvas = document.getElementById("kamonCanvas");
const ctx = canvas.getContext("2d");
var x = 150;
var y = 70;
var size = 50;
drawTriangle(ctx, x, y, size);
}
function drawTriangle(ctx, x, y, size){
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + size, y + size);
ctx.lineTo(x - size, y + size);
ctx.moveTo(x, y);
ctx.fill();
ctx.closePath();
}
-->
</script>
</head>
<body onload="drawKamon()">
<canvas id="kamonCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
ブラウザで確認してみましょう
ここも先ほどと表示が変わっていなければ成功です。
さてここまで
プログラムの動き自体は変えずに
プログラムソースを変更する作業を行いました
プログラムの動き自体は変えずに
プログラムソースを変更する作業を
「リファクタリング」といいます。
「リファクタリング」したら必ず確認が必要です。
もしリファクタリングした結果
動いていたプログラムが動かなくなった場合
「デグレード」と言って
仕事ではめちゃめちゃ怒られます。
気をつけましょう
09.完成へ・・・
さて最後の仕上げです
ミツウロコの三角形はみっつなので
drawTriangle() を３回呼びます
右下の三角形の頂点は
最初の頂点から x+size、y+size
左下の頂点は
最初の頂点から x-size、y+size
で計算できます
なので呼び出し処理はこうなります
drawTriangle(ctx, x + size, y + size, size); drawTriangle(ctx, x - size, y + size, size);
ソースコード最終形
ダウンロード コピーできました！
kamon_07.html
<html>
<head>
<title>
kamon
</title>
<script>
<!--
function drawKamon(){
const canvas = document.getElementById("kamonCanvas");
const ctx = canvas.getContext("2d");
var x = 150;
var y = 70;
var size = 50;
drawTriangle(ctx, x, y, size);
drawTriangle(ctx, x + size, y + size, size);
drawTriangle(ctx, x - size, y + size, size);
}
function drawTriangle(ctx, x, y, size){
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + size, y + size);
ctx.lineTo(x - size, y + size);
ctx.closePath();
ctx.fill();
}
-->
</script>
</head>
<body onload="drawKamon()">
<canvas id="kamonCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
ミツウロコが表示されました。
完成です
10.完成
ソースコードは kamon_07.html で
完成です。
自分で作ってみてうまくいかないなどありましたら
これまで紹介したソースコードをコピーしてみてください。
また、ソースの比較方法としては「ウィンマージでファイルを比較する」という動画もありますので、そちらもご参考にしていただければと思います。
「ファイル比較でプログラムの間違い探しがカンタンに！
ウィンマージ(WinMerge)をインストールしよう！」
JavaScriptで家紋を描こうは以上となります。
ご閲覧いただきありがとうございました。