JavaScript Canvas マウスドラッグで図形を動かす

実現したいこと

Canvasに描かれた2つの正方形について、一方は右クリック、残りは左クリック
で動かせるようにする。

発生している問題・エラーメッセージ

操作はできるが、一方を動かすと片方が画面から消えてしまう。これを修正したい。

該当のソースコード

Html,JavaScirpt
1<html>
2  <head>
3      <meta charset="utf-8">
4      <style>
5        * { padding: 0; margin: 0; }
6        canvas { background: #eee; display: block; margin: 0 auto; }
7      </style>
8  </head>
9  <body>
10
11    <canvas id="cvs" width="500" height="500"></canvas>
12
13    <script>
14      var cvs = document.getElementById("cvs");
15      var ctx = cvs.getContext("2d");
16      var side = 80;
17
18      function Square(x,y){
19        var me = this;
20        this.x = x;
21        this.y = y;
22
23        this.drawRect =  function() {
24        ctx.fillStyle = "#0095DD";
25        ctx.fillRect(this.x,this.y,side,side);
26        }
27
28        this.draw = function() {
29          ctx.clearRect(0, 0, cvs.width, cvs.height);
30          this.drawRect();
31        }
32
33        this.move = (e) => {
34          var rect = e.target.getBoundingClientRect();
35          this.x = e.clientX - rect.left;
36          this.y = e.clientY - rect.top;
37          this.draw();
38        }
39      }
40
41      s1 = new Square(250,250);
42      s2 = new Square(400,50);
43
44      // var s1move = (e) => {
45      //     var rect = e.target.getBoundingClientRect();
46      //     s1.x = e.clientX - rect.left;
47      //     s1.y = e.clientY - rect.top;
48      //     this.draw();
49      // }
50
51      // var s2move = (e) => {
52      //     var rect = e.target.getBoundingClientRect();
53      //     s2.x = e.clientX - rect.left;
54      //     s2.y = e.clientY - rect.top;
55      //     this.draw();
56      // }
57
58      cvs.addEventListener('load',s1.drawRect());
59      cvs.addEventListener('load',s2.drawRect());
60
61      cvs.addEventListener('click', ()=> {
62        cvs.addEventListener('mousemove',s1.move);
63      });
64    
65      cvs.oncontextmenu = function () {
66        cvs.addEventListener('mousemove',s2.move);
67        return false;
68      };
69
70      cvs.addEventListener('mouseup',()=> {
71        cvs.removeEventListener('mousemove',s1.move);
72      });
73      cvs.addEventListener('mouseup',()=> {
74        cvs.removeEventListener('mousemove',s2.move);
75      });
76    </script>
77  </body>
78</html>

試したこと

リスナにおいて変数eが共通して使われていることが原因と考えた。
コメントアウトしているもののように、一応move関数を別々に定義してみたが、やっていることは同じなので結果は変わらなかった。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1        this.draw = function() {
2          ctx.clearRect(0, 0, cvs.width, cvs.height);
3          this.drawRect();
4        }

ここでキャンバス全体をクリアした後に1つのSquareだけ描いているから、別のSquareは消えたままです。

move() の中で this.draw() を呼ぶのではなくて、「キャンバスをクリアしてからすべての Square の drawRect() を呼ぶ」のような関数を呼びましょう。

投稿2022/11/18 01:17

int32_t

総合スコア20941

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！