陰陽マーク 太陰太極図を JavaScript でを描こう！
YouTube連動記事
この記事はYouTube連動記事です。動画のほうでも紹介していますのであわせてご確認ください。
●43分連続版
【YouTube】 陰陽マークを描こう(Full)
●分割版
【YouTube】 陰陽マークを描こう #01
【YouTube】 陰陽マークを描こう #02
【YouTube】 陰陽マークを描こう #03
●各ソースへのリンク
●各ページ内のリンク
01.ファイルの新規作成
デスクトップで何もないところを右クリックして右クリックメニュー → 新規作成 →
テキストドキュメントをクリックします。
ファイル名は「onmyou.txt」としておきます。
作成されたテキストドキュメントについて
ファイル名に拡張子「.txt」が表示されていない場合は 表示するようにしてください。
もし表示されてない方は
エクスプローラ → 表示 → フォルダ→オプション → 表示タブ 登録されている拡張子を表示しない
のチェックを外すで 「.txt」が表示されます。
次に拡張子を変更します
ファイルを右クリックし 右クリックメニュー → 名前の変更
で拡張子を変更します
「拡張子を変更するとファイルが使えなくなる可能性があります。変更しますか」とでます。
「はい」を押します。
onmyou.htmlファイルのアイコンが変わります。
これはテキストファイルから ブラウザで開くHTMLファイルに変わったことを示しています。
02.HTML基本部分の作成
onmyou.htmlのファイルを開きます。先ほど拡張子をHTMLにしたのでダブルクリックするとブラウザが開きます。
なのでこの状態でプログラムを変更するには
右クリックメニューから
プログラムから開く→サクラエディタです
まずHTMLの基本部分を打ち込みます
インデントに注意しながら入力してみてください。
<html> <head> </head> <body> </body> </html>
タイトルは「太陰太極図」としておきます。
<title>
太陰太極図
</title>
ここで注意
HTMLで日本語を扱うとき「文字コード」
というのを気にする必要があります。
コンピュータはアメリカで生まれたものなので
基本はすべて英語です。
なので日本語で表示するときにひと手間かかっているんです
そのひと手間が「文字コード」です
ただ
文字コードの話をすると長くなるので必要なとこだけ説明します
サクラエディタの右下に「文字コードの設定」があります
ここをダブルクリックして
「UTF-8」にします
つづいて
HTMLのヘッダタグの中に
<meta charset="UTF-8">を書きます。
これで今回の文字コードの設定は終わりです。
文字コードについては奥が深いので調査してみるのも
面白いかもしれません
bodyの中には、canvasタグをひとつ書きます。
<canvas id="mainCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
ダウンロード コピーできました！
onmyou_01.html
<html> <head> <meta charset="UTF-8"> <title> 太陰太極図 </title> </head> <body> <canvas id="mainCanvas" width="300px" height="300px" style="border:1px solid;" ></canvas> </body> </html>
canvas タグは少し特殊なタグです
他のタグと違い、canvasタグには直接絵を描くことができます。
ファイルをダブルクリックしてみましょう。
ブラウザが開きます。
ブラウザの中は 四角い枠が表示されていれば成功です
もしお手本通りにうまく行かない方は 上記プログラムソースをコピーしてファイル保存して 比較してみてください。
どうしてもわからないっていう場合は
お手本と比較してみようの動画もありますのでそちらも参考にしてみてください。
「ファイル比較でプログラムの間違い探しがカンタンに！
ウィンマージ(WinMerge)をインストールしよう！」
よくある間違いとしては、カッコが全角になっていたりとか スペースが全角になっていたりといったところです。
03.画面の使い方
パソコンの画面の使い方についてブラウザとテキストエディタを左右に並べると分かりやすくなります。
プログラムを左で書いたら右で動きを確認です。
左右逆でもかまいません。
04.描画関数を作る
JavaScriptを書くためにscriptタグを書きます<script> <!-- --> </script>
scriptタグの中に関数を書きます
「太陰太極図を描く関数」です
function drawTaiinTaikyokuZu(){
}
次にdrawTaiinTaikyokuZuを呼び出す部分を書いていきます
bodyタグに onload の処理を書きます
<body onload="drawTaiinTaikyokuZu()">
onload は HTMLのページ読み込み後に
自動で呼ばれる処理です
drawTaiinTaikyokuZu() 関数の中も書きます
const canvas = document.getElementById("mainCanvas");
const ctx = canvas.getContext("2d");
document.getElementById("mainCanvas") は
mainCanvas というIDの要素（タグのデータ）を取得するよって意味ですね
取得した要素はcanvasという変数に代入されます
変数宣言は通常はvar や let を使って宣言しますが
ここではconstを使って宣言しています
varやletは一度変数宣言すれば
違う値をいれてなんども使いまわすことができます
これと違ってconstは
一回しか値を代入できません。
なので
使いまわししたくない変数
もしくは
使いまわしするとバグが起こりやすい変数を宣言するときに
constを使います
つづいて
canvas.getContext("2d");
の部分ですが
これは「コンテキスト」を取得しています
コンテキストは言い回しが難しいのですが
画面に絵を描くためにいろいろな情報がつまったものです
canvsを使うときの決まり文句として覚えて頂いて大丈夫です
05.描き方
プログラミングを行う前に図形を描く順序を確認します順序は以下のとおりです
06.①白い半円を描く
白い半円を描く処理を書いていきますまず線の色を決めます
// 線の色を指定 ctx.strokeStyle = "#000000";
スラッシュふたつでコメントを書くことができます。
コメントは処理が実行されない行です
// の後ろから1行おわるまでがコメントです。
処理が大きくなるとどこでなんの処理をしてるのかわからなくなるので
こうやってメモ書きのように説明文を残します
strokeStyleは線の色の設定です。
#000000の色の指定方法はCSSの書き方と同じものです
今回は黒と白のみ使用するので２つだけ覚えましょう
線の色はすべて黒で書いていきます
それでは①の白い半円を書いていきます
// ①白い半円を描く ctx.fillStyle = "#FFFFFF";fillは塗りつぶし、#FFFFFFは白のことです
先ほど線の色を指定したのと同じやり方です
ctx.beginPath();beginPath()関数ですが
Pathはお絵描きソフトでよく使われてるパスのことです。
任意の点をつないで絵を描くやつですね
なのでbeginPathは「パスを描き始めるよ」ってことです。
今回は任意の点をつなぐわけではないのですが
「円弧を閉じる」という処理があるのでパスを使用しています
ctx.arc(
150 // 中心x座標
, 150 // 中心y座標
, 100 // 半径
, Math.PI * 1/2 // 円弧の開始角
, Math.PI * 3/2 // 円弧の終了角
, false // 描画の方向
);
ctx.arcは円弧を描く関数です。
円弧は円周の一部分のことですね
これを使って半円を描いています
ctx.arcは引数が多くて間違いやすいので
引数ひとつにつき1行使います
| No. | 説明 | 略称 |
| 第１引数 | 円の中心のx座標（単位はピクセル） | 中心x座標 |
| 第２引数 | 円に中心のy座標（単位はピクセル） | 中心y座標 |
| 第３引数 | 円の半径（単位はピクセル） | 半径 |
| 第４引数 | 円弧の開始位置の角度 | 円弧の開始角 （単位はラジアン） |
| 第５引数 | 円弧を終了位置の角度 | 円弧の終了角 （単位はラジアン） |
| 第６引数 | true：反時計回り false:時計回り | 描画の方向 （指定がなければ時計回り） |
それぞれの引数は円弧は円周の一部なので
引数も円をベースに考えます
最初の二つが円弧が円だった場合の中心座標x, yです
今回はキャンバスのサイズが300x×300なので
中心は150の150にしています
第３引数は円の半径です
半径100にしています
第４、第５引数が円弧の開始角と終了角で
第６引数が時計回りか反時計回りかを指定します
第６引数が時計回りか反時計回りかなので
同じ開始角と終了角でも描かれる円弧が変わります
開始角、終了角の角度指定には
ラジアンという単位を使います
ラジアンは数式であらわすとこうなんですが・・・
ちょっと数式はおいといて
簡単に説明すると
90°とか 180°とかを
うまいこと計算して
違う単位にする です
基本的には
180°＝πだけ覚えとけばOKです
円の右が0°で、下が90°、左が180°、上が270°なので
πで表で表してみます
π×1/2は90°、π×3/2は270° という計算になります
π×1/2は90°くらいならすぐ計算できるのですが
もう少しわかりやすくしたいです
ここで約分の逆をします
1/2を90/180に変えます
こうすると分子の90と右の90°が一致します。
こうなれば計算は簡単です
角度を37°にしたいときは分子を37に
130°にしたいときは分子を130にすれば計算完了です
さてプログラミングでは以下のように書きます
Math.PI * 90/180
Math.PI * 270/180
πはJavaScript では Math.PIと書きます
Math.PI には3.14・・・・という数字がはいっています
掛け算は*、割り算は/です
プログラミングでは無理に約分する必要はありません。
もちろん、あらかじめ約分したほうが処理は速いのですが
それは2000分の1秒ほどはやくなるだけです
それよりはむしろ
ソースコードをわかりやすく書いたほうがバグが少なく安全です
arc関数の説明はここまでです
ctx.closePath();パスを閉じます
ctx.stroke();半円の枠線を書いています
ctx.fill();半円の中を塗りつぶしています
ダウンロード コピーできました！
onmyou_02.html
<html>
<head>
<meta charset="UTF-8">
<title>
太陰太極図
</title>
<script>
<!--
function drawTaiinTaikyokuZu(){
const canvas = document.getElementById("mainCanvas");
const ctx = canvas.getContext("2d");
// 線の色を指定
ctx.strokeStyle = "#000000";
// ①白い半円を描く
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(
150 // 中心x座標
, 150 // 中心y座標
, 100 // 半径
, Math.PI * 90/180 // 円弧の開始角
, Math.PI * 270/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
-->
</script>
</head>
<body onload="drawTaiinTaikyokuZu()">
<canvas id="mainCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
07.変数を使う
さて、左の白い半円が描けたのですが
このあといっぱい円を書きます
このあとの処理のことを考えて
いま数値そのまま書いてる150と100を変数にします
中心座標は centerx と centery にいう変数にします
半径はrにします
まず変数宣言をして
そのあと、それぞれの値を使っている箇所を変更します
ダウンロード コピーできました！
onmyou_03.html
<html>
<head>
<meta charset="UTF-8">
<title>
太陰太極図
</title>
<script>
<!--
function drawTaiinTaikyokuZu(){
const canvas = document.getElementById("mainCanvas");
const ctx = canvas.getContext("2d");
let centerx = 150;
let centery = 150;
let r = 100;
// 線の色を指定
ctx.strokeStyle = "#000000";
// ①白い半円を描く
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery // 中心y座標
, r // 半径
, Math.PI * 90/180 // 円弧の開始角
, Math.PI * 270/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
-->
</script>
</head>
<body onload="drawTaiinTaikyokuZu()">
<canvas id="mainCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
08.②右の黒い半円
左の白い半円の次は右の黒い半円です
とはいえ
さきほど書いた処理をもう一度書くのは骨がおれます
というわけで、コピペします
// ①白い半円を描くから
ctx.fill();までをコピーして
ctx.fill();の次の行へ
貼り付けます
そしてコピーした２つめの処理を変えます
変更内容は
コメントの①を②に変えて白を黒に変えます
// ②黒い半円を描く
"#FFFFFF"を"#000000"に変えます
ctx.fillStyle = "#000000";と変えます
開始角と終了角を変えます
開始を270°、終了を90°にします
, Math.PI * 270/180 // 円弧の開始角 , Math.PI * 90/180 // 円弧の終了角
ダウンロード コピーできました！
onmyou_04.html
<html>
<head>
<meta charset="UTF-8">
<title>
太陰太極図
</title>
<script>
<!--
function drawTaiinTaikyokuZu(){
const canvas = document.getElementById("mainCanvas");
const ctx = canvas.getContext("2d");
let centerx = 150;
let centery = 150;
let r = 100;
// 線の色を指定
ctx.strokeStyle = "#000000";
// ①白い半円を描く
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery // 中心y座標
, r // 半径
, Math.PI * 90/180 // 円弧の開始角
, Math.PI * 270/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.stroke();
ctx.fill();
// ②黒い半円を描く
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery // 中心y座標
, r // 半径
, Math.PI * 270/180 // 円弧の開始角
, Math.PI * 90/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.stroke();
ctx.fill();
}
-->
</script>
</head>
<body onload="drawTaiinTaikyokuZu()">
<canvas id="mainCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
09.③上半分の白い円
白い半円黒い半円が描けたので
今度は上半分の白い円を描きます
見た目的に半円を描けばよさそうにも見えるのですが
数値やブラウザによっては薄く境界線がみえてしまうことがあるので
ここはきっちり円で描いていきます
さきほどと同様にひとつ前の処理をコピペして作っていきます
// ②黒い半円を描くから
ctx.fill();
までをコピーし
ctx.fill();の次の行に貼り付けます
これで黒い半円を描く処理が２こできます
このコピーした２つめの処理を変えます
コメントを変更します
// ③上半分の白い円を描く
"#000000"を"#FFFFFF"に変更します
ctx.fillStyle = "#FFFFFF";
白黒の変更はさっきの逆ですね
開始角と終了角を変えます
円なので
開始を0°、終了を360°にします
, Math.PI * 0/180 // 円弧の開始角 , Math.PI * 360/180 // 円弧の終了角
Math.PI * 0/180 は 単純に0で書いてもよいです
この説明ではこの書き方のままでいきます
半径は全体の半分なので
r/2 とします
スラッシュは割り算ですね
そして中心座標の位置です
大きな円の中心から上に半径の半分ずらします なのでy座標の計算式は
centery - r/2
となります
ここのctx.stroke();は円の枠線を書く処理です
上半分の白い円では枠線はいりません
ctx.stroke(); は削除します
ctx.fillStyle = "#FFFFFF";
ダウンロード コピーできました！
onmyou_05.html
<html>
<head>
<meta charset="UTF-8">
<title>
太陰太極図
</title>
<script>
<!--
function drawTaiinTaikyokuZu(){
const canvas = document.getElementById("mainCanvas");
const ctx = canvas.getContext("2d");
let centerx = 150;
let centery = 150;
let r = 100;
// 線の色を指定
ctx.strokeStyle = "#000000";
// ①白い半円を描く
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery // 中心y座標
, r // 半径
, Math.PI * 90/180 // 円弧の開始角
, Math.PI * 270/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.stroke();
ctx.fill();
// ②黒い半円を描く
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery // 中心y座標
, r // 半径
, Math.PI * 270/180 // 円弧の開始角
, Math.PI * 90/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.stroke();
ctx.fill();
// ③上半分の白い丸を描く
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery - r/2 // 中心y座標
, r/2 // 半径
, Math.PI * 0/180 // 円弧の開始角
, Math.PI * 360/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.fill();
}
-->
</script>
</head>
<body onload="drawTaiinTaikyokuZu()">
<canvas id="mainCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
10.下半分の黒い円
今度は下半分の黒い円を描きます
これもひとつ前の処理をコピペして
作っていきます
// ③上半分の白い円を描くから
ctx.fill();までをコピーしてctx.fill();の次の行へ貼り付けます
これで上半分の白い円を描く処理が２こできました
コピーされた２こめの処理を変えていきます
コメントを変えます
// ④下半分の黒い円を描く"#FFFFFF"から"#000000"に変えます
ctx.fillStyle = "#000000";
中心座標の位置です
大きな円の中心から下に半径の半分ずらします
なのでy座標の計算式は
centery + r/2
となります
ダウンロード コピーできました！
onmyou_06.html
<html>
<head>
<meta charset="UTF-8">
<title>
太陰太極図
</title>
<script>
<!--
function drawTaiinTaikyokuZu(){
const canvas = document.getElementById("mainCanvas");
const ctx = canvas.getContext("2d");
let centerx = 150;
let centery = 150;
let r = 100;
// 線の色を指定
ctx.strokeStyle = "#000000";
// ①白い半円を描く
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery // 中心y座標
, r // 半径
, Math.PI * 90/180 // 円弧の開始角
, Math.PI * 270/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.stroke();
ctx.fill();
// ②黒い半円を描く
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery // 中心y座標
, r // 半径
, Math.PI * 270/180 // 円弧の開始角
, Math.PI * 90/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.stroke();
ctx.fill();
// ③上半分の白い丸を描く
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery - r/2 // 中心y座標
, r/2 // 半径
, Math.PI * 0/180 // 円弧の開始角
, Math.PI * 360/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.fill();
// ④下半分の黒い丸を描く
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery + r/2 // 中心y座標
, r/2 // 半径
, Math.PI * 0/180 // 円弧の開始角
, Math.PI * 360/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.fill();
}
-->
</script>
</head>
<body onload="drawTaiinTaikyokuZu()">
<canvas id="mainCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
11.上の小さい黒い円
今度は上の小さい黒い円を描きます
これも前の処理をコピペして作っていきます
// ④下半分の黒い円を描くから
ctx.fill();までをコピーしてctx.fill();の次の行へ貼り付けます
コピーされた２こめの処理を変えていきます
コメントを変更します
// ⑤上の小さい黒い円を描く
色は黒のまま変更しません
中心座標は上半分の真ん中なので
centery - r/2
円の半径は約1/8です
r/8
ダウンロード コピーできました！
onmyou_07.html
<html>
<head>
<meta charset="UTF-8">
<title>
太陰太極図
</title>
<script>
<!--
function drawTaiinTaikyokuZu(){
const canvas = document.getElementById("mainCanvas");
const ctx = canvas.getContext("2d");
let centerx = 150;
let centery = 150;
let r = 100;
// 線の色を指定
ctx.strokeStyle = "#000000";
// ①白い半円を描く
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery // 中心y座標
, r // 半径
, Math.PI * 90/180 // 円弧の開始角
, Math.PI * 270/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.stroke();
ctx.fill();
// ②黒い半円を描く
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery // 中心y座標
, r // 半径
, Math.PI * 270/180 // 円弧の開始角
, Math.PI * 90/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.stroke();
ctx.fill();
// ③上半分の白い丸を描く
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery - r/2 // 中心y座標
, r/2 // 半径
, Math.PI * 0/180 // 円弧の開始角
, Math.PI * 360/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.fill();
// ④下半分の黒い丸を描く
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery + r/2 // 中心y座標
, r/2 // 半径
, Math.PI * 0/180 // 円弧の開始角
, Math.PI * 360/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.fill();
// ⑤上の小さい黒い丸を描く
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery - r/2 // 中心y座標
, r/8 // 半径
, Math.PI * 0/180 // 円弧の開始角
, Math.PI * 360/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.fill();
}
-->
</script>
</head>
<body onload="drawTaiinTaikyokuZu()">
<canvas id="mainCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
12.下の小さい白い円
最後の仕上げです
今度は下の小さい白い円を描きます
これも前の処理をコピペして作っていきます
// ⑤上の小さい黒い円を描くから
ctx.fill();までをコピーしてctx.fill();の次の行へ貼り付けます
コピーされた２こめの処理を変えていきます
コメントを変更します
// ⑥下の小さい白い円を描く
色を変更します
"#000000"から"#FFFFFF"に変えます
ctx.fillStyle = "#000000";
↓
ctx.fillStyle = "#FFFFFF";
中心座標の位置は
大きな円の中心から下に半径の半分ずれるので
なのでy座標の計算式は
centery + r/2となります
半径は変更しません
ダウンロード コピーできました！
onmyou_08.html
<html>
<head>
<meta charset="UTF-8">
<title>
太陰太極図
</title>
<script>
<!--
function drawTaiinTaikyokuZu(){
const canvas = document.getElementById("mainCanvas");
const ctx = canvas.getContext("2d");
let centerx = 150;
let centery = 150;
let r = 100;
// 線の色を指定
ctx.strokeStyle = "#000000";
// ①白い半円を描く
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery // 中心y座標
, r // 半径
, Math.PI * 90/180 // 円弧の開始角
, Math.PI * 270/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.stroke();
ctx.fill();
// ②黒い半円を描く
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery // 中心y座標
, r // 半径
, Math.PI * 270/180 // 円弧の開始角
, Math.PI * 90/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.stroke();
ctx.fill();
// ③上半分の白い丸を描く
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery - r/2 // 中心y座標
, r/2 // 半径
, Math.PI * 0/180 // 円弧の開始角
, Math.PI * 360/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.fill();
// ④下半分の黒い丸を描く
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery + r/2 // 中心y座標
, r/2 // 半径
, Math.PI * 0/180 // 円弧の開始角
, Math.PI * 360/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.fill();
// ⑤上の小さい黒い丸を描く
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery - r/2 // 中心y座標
, r/8 // 半径
, Math.PI * 0/180 // 円弧の開始角
, Math.PI * 360/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.fill();
// ⑥下の小さい白い丸を描く
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(
centerx // 中心x座標
, centery + r/2 // 中心y座標
, r/8 // 半径
, Math.PI * 0/180 // 円弧の開始角
, Math.PI * 360/180 // 円弧の終了角
, false // 描画の方向
);
ctx.closePath();
ctx.fill();
}
-->
</script>
</head>
<body onload="drawTaiinTaikyokuZu()">
<canvas id="mainCanvas"
width="300px" height="300px"
style="border:1px solid;"
></canvas>
</body>
</html>
13.完成
ソースコードは onmyou_08.html で完成です。
表示された画像は右クリックしてコピーすることもできるので
お絵描きソフトに貼り付けてみても面白いかもしれません
自分で作ってみて「うまくいかない」などありましたら
これまで紹介したソースコードをコピーしてみてください。
また、ソースの比較方法としては「ウィンマージでファイルを比較する」という動画もありますので、そちらもご参考にしていただければと思います。
「ファイル比較でプログラムの間違い探しがカンタンに！
ウィンマージ(WinMerge)をインストールしよう！」
JavaScriptで陰陽マークを描こうは以上となります。
ご閲覧いただきありがとうございました。