canvasアニメーションを使ってみた - Qiita

canvas要素を使用したアニメーションを使用したことがなかったので、試してみました。 マウスをcanvas上に載せるとアニメーション開始、外すと停止する簡単なアニメーションです。 コードはこちら CodePen canvasとは HTML5から追加され、HTML上に図形(ビットマップ画像)やグラフィックをJavaScriptによって描画できる技術です。 他にも、アニメーション、ゲームのグラフィック、データの可視化、写真加工、リアルタイム動画処理などに使用することができるそうです。 HTMLの要素とキャンバスAPIなどを使用して描画します。 コード HTMLはcanvas要素、id属性、width属性、height属性を指定しています。 width、heightは描画範囲になりますが、指定しなければ初期値のwidth300px、height150pxが設定されます。