・ヮ・）あ、おはようございまーす
突然ですが 日本語でプログラミングできる 「なでしこ」をご存知でしょうか？
私は以前から存在は知っていたのですが触ったことがありませんでした
なでしこ3は JavaScript で実装されているらしく、プラグインを入れることで DOM操作 や canvas を使うことができます
今回は勉強を兼ねて こちら(htmlとcssでいのちを輝かせる)を参考に 日本語でいのちを輝かせてみようと思います！
方針
参考記事では css を使ってますが css だとなでしこ感がでない(日本語で書けない)ので
canvasを使って描いていきます！
キャンバスを作る
!『plugin_browser』を取り込む
# キャンバスを作成
「#nako3_canvas」のDOM要素取得
キャンバスはそれ
キャンバスの「width」に500をDOM属性設定
キャンバスの「height」に500をDOM属性設定
キャンバスへ描画開始
てにをは が若干おかしい気がしますが めっちゃ日本語ですね！
円を描く
「線色設定」関数「塗色設定」関数で色を指定した後に
[ x , y ]へ r の円描画
[ x , y , x幅 , y幅 , 回転 , 開始角 , 終了角 , 左回転か]の楕円描画
を使って描きます
赤色に線色設定
赤色に塗色設定
[70, 70]へ50の円描画
[270, 70, 30, 50, 0, 0, 360をラジアン変換, 0]の楕円描画
体を描く
# 体部分を描画
赤色に線色設定
赤色に塗色設定
[215, 62]へ50の円描画
[67.5, 164]へ50の円描画
[146.5, 195]へ50の円描画
[84.5, 264.5]へ62.5の円描画
[173.5, 409.5]へ45の円描画
[267.5, 420]へ67.5の円描画
[326.5, 82.5]へ65の円描画
[148, 115.5, 46.5, 50, 0, 0, 360をラジアン変換, 0]の楕円描画
[127.5, 342.5, 33, 55, 0, 0, 360をラジアン変換, 0]の楕円描画
[357, 347.5, 71.5, 64.35, 0, 0, 360をラジアン変換, 0]の楕円描画
[369.5, 238.5, 46.895, 56.5, 0, 0, 360をラジアン変換, 0]の楕円描画
[376.5, 163.5, 80, 40, 0, 0, 360をラジアン変換, 0]の楕円描画
目玉を書き込む
# 白目部分を描画
白色に線色設定
白色に塗色設定
[52.5, 155]へ25の円描画
[100, 275]へ28.5の円描画
[270, 445]へ23.5の円描画
[342.5, 57.5]へ26.5の円描画
[381.5, 353.5, 35, 31.5, 0, 0, 360をラジアン変換, 0]の楕円描画
# 黒目部分を描画
青色に線色設定
青色に塗色設定
[41, 149]へ11.5の円描画
[98.5, 260.5]へ13.5の円描画
[270, 458.75]へ10の円描画
[399.5, 346]へ14の円描画
[352.5, 46]へ12.5の円描画
できた！
完成品
nako3storage にて いのちの輝きくんのコードの確認と実行ができます！