Q&A
実現したいこと
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件
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
総合スコア18572
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。