エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント1件
- 注目コメント
- 新着コメント
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【canvas初学者必見】マウスカーソルを避けていくパーティクルアニメーションを作ろう! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
update() { this.x += this.directionX; if(this.x > canvas.width + this.radius) { this.x = -this.ra... update() { this.x += this.directionX; if(this.x > canvas.width + this.radius) { this.x = -this.radius; } this.render(); } 基本的なパーティクルでは、上記のように「丸の位置を少しずつ動かす」という処理をしています。 今回は、ここのupdateの処理の中で計算をします。 マウスの位置取得 まず、マウスの位置を取得する必要があります。そのためにmousemoveイベントを登録し、マウスカーソルの位置を変数に入れておくようにします。 const mouse = { x: null, y: null } window.addEventListener('mousemove', (event) => { mouse.x = event.x; mouse.y = event.y; }
2021/08/31 リンク