Canvas初心者が雪を降らせてみた

おはようございます😊まおです！
今週はいつもと違って、ただの画面を作りました！！ｗ


ずっと使ってみたいと思っていたCanvas APIを使ってみました！！
いいから早く画面とソースだけよこせってこともあると思うのでこちらです💁‍♀️ｗ↓↓

雪が降る画面

---

■全画面はこちら

https://tonamao.github.io/Snow/

■コードはこちら

See the Pen Snow by tonamao (@tonamao) on CodePen.

Canvas API

---

Canvas API画面に図形を描画できる機能です。
Canvas APIってのは俗称なのかな～🤔

言語としては、HTMLとJavaScriptを使います。
HTMLのcanvasタグをJavaScriptで操作していく感じです。


詳細は↓↓↓のURLとかとても参考になりました！（多分非公式ですが...）
http://www.html5.jp/canvas/ref.html


たいぶ見切り発車で作りましたが、なんとか一週間でできてよかったです！！
冬ということにちなんでの「雪」でしたが、ギリですかね...ｗ

これで少しはCanvas APIに慣れたかな～




下記、今回の実装のポイントだけ簡単に書きました。

Canvasの縦横比率がおかしい

---

ここにアプリを載せるとき、スタイルの設定を分業させていて
別途CSSファイルを作ってました。
今回も同様にCSSファイルを別途作成してました。

そこで試しに正方形を描画してみたところ...
縦長の長方形になってしまいました...！！！


原因はcanvasのwidthとheightの設定にあるんだとか...！？

styleのwidth、heightではなく、属性のwidth、heightで設定しなければならない！



？？？



笑

まあ、下記を見てください。

■styleで設定

<canvas style="width: 500px; height: 500px;"></canvas>

■属性で設定

<canvas width="500px" height="500px"></canvas>

後者の属性で指定してあげないと、canvas自体のサイズを変更することはできないようでした。

属性とスタイルって違いがあったのか～(;'∀')ｗ

JavaScriptのclassを使ってみた

---

JavaScriptの知識はほぼ皆無です、すみません(-_-;)。。
今回「雪」を作るのに、一粒一粒の設定を行っているわけですが、
こいつらをクラスみたいに持てないのかな～と思って調べていたところ
JavaScriptにclassってないイメージでしたが、2015年頃に追加されてたみたいですね～（いつの話...w

■class定義

class Snow {};

こんな感じで書けます。

■コンストラクタ

class Snow {
 constructor(){};
};

使うときはnewすればOK！
■classを使う

new Snow();

今回のコードも見様見真似、調べた知識をもとにclassを使って実装しております！

こんな感じで使えばいいのかな～
勉強になりました。

おまけ～NG集～

---

作成段階でミスったやつを載せてみますｗ

■雪が伸びていく...


■雪が消えていく...




ちなみにjQueryで一発で雪を降らせるプラグインがあるんだとか...(; ^ ｰ^)

以上ですｗｗｗ