kazuki_nagasawa https://blog.hatena.ne.jp/kazuki_nagasawa/ 雑食性雑感雑記 https://kazuki-nagasawa.hatenablog.com/ JavaScript Canvas 前回に下地となるクラスを作ったので、アニメーションが活かせる簡単な処理を作ってみます。 『ボールを投げて壁に反射して――』が分かり易そうなのでコレを作ってみよう。 作成物 Canvas エリアにマウスカーソルを持っていくと、mousemove イベントにより球体が生成されます。 球体は何回か壁に反射して消滅します。 マウス動かして大量生成すると、カラフルな感じになります。 技術要素 描画している点を管理する「Point」クラス Canvas の処理で描画位置等管理するのは大変なので、描画位置やスタイルを管理するための Point クラスを作ります。 コンストラクタで初期位置およびタイムスタンプ… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fkazuki-nagasawa.hatenablog.com%2Fentry%2Fmemo_20221026_javascript_canvas_move_points" title="【JavaScript &amp; Canvas】 等速度運動と反射 - 雑食性雑感雑記" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/k/kazuki_nagasawa/20221026/20221026124729.png Hatena Blog https://hatena.blog 2022-10-26 13:20:46 rich https://kazuki-nagasawa.hatenablog.com/entry/memo_20221026_javascript_canvas_move_points 1.0 100%