方針

参考記事では 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 にていのちの輝きくんのコードの確認と実行ができます！