遅ればせながらcanvasを勉強し始めました。
「ちょっと動きが欲しいんだけど」にサクッと応えたい。
そもそもcanvasってなんなんだ？というところからのスタートです。
単純なアニメーションならtransitionやanimationなど、CSSだけである程度は動かせますが
さらに複雑になった時はcanvasを使うんだろうな、という程度の認識でした。
canvasとは？
簡単にいうと「図形を描画するもの」です。
主にjavascriptを使って描画していきます。
図形の描画はどう書くの？
まずはHTMLにcanvasタグを記述し、javascriptで関連付けします。
idなどで取得し、getContext('2d')で描画を有効にします。
あとは描画に使うメソッドや属性を使って描画していきます。
※canvasに対応していないブラウザもあるため
if (canvas.getContext){}内で処理を書きます。
塗りの四角、線の四角、円など色々あります。 今回は円を描きました。
ctx.beginPath(); //今から描画しますよ、という宣言 ctx.arc(100+count, 100+count, 50, 0, Math.PI*2, false); //円形（x, y, radius, startAngle, endAngle [, anticlockwise ]） ctx.fill(); //塗りつぶす ctx.fillStyle = 'rgb(204, 0, 0)'; //塗りの色（rgba()で透過もできる）
その他こちらのサイトで解説されています。
Canvasリファレンス http://www.htmq.com/canvas/
描いた図形を動かしたい
まず私が勘違いしていたところは「描画した図形を動かす」というところ。
canvasのアニメーションはコマ送りのアニメーションで一度描いた図形を動かしているわけではありませんでした。
一コマずつ描画することで動いているように見えています。
パラパラ漫画と同じですね。
クリアするctx.clearRect();とx値,y値などを少しずつ変えた描画を繰り返して作ります。
※繰り返し実行するので関数にすると良いようです。for文で書いている方もいました。
行ったり来たりする動き
countに1ずつ足していき、位置をずらしています。
1を足せば下へ移動し、1を引けば上へ移動します。
upのtrueかfalseかでどちらの処理にするか切り替えています。
初期値はfalseなのでcountが30になるまで1を足し続けます。
countが30になるとupをtrueにし、countから1を引き続けます。
今度はcountが0になるとupをfalseにするのでまた1ずつ足すようになります。
デモ（行ったり来たりする丸）
See the Pen canvas - test by Nakamura (@takayo-nakamura) on CodePen.
最後に
今回は行ったり来たりするアニメーションなのでCSSでもできそうですが徐々に変形したり、波のように動かしたり、ランダムで描画や位置が変わるなどしたければcanvasを使うのが良さそうです。
いろんな参考記事を見た所、三角関数やらなんやらと数学・物理の知識も欲しくなりそうで早くもくじけそうになっています。
簡単なものからちょっとずつやっていきましょうね・・。
