Q&A
実現したいこと
Canvasにかく青い正方形を、マウスドラッグに合わせて動かしたい。
発生している問題・エラーメッセージ
正方形の描画はされるが、マウスドラッグをしても動かない。
該当のソースコード
html,javascript
1<html> 2 <head> 3 <meta charset="utf-8"> 4 <title>3-2</title> 5 <style> 6 * { padding: 0; margin: 0; } 7 canvas { background: #eee; display: block; margin: 0 auto; } 8 </style> 9 </head> 10 <body> 11 12 <canvas id="cvs" width="500" height="500"></canvas> 13 14 <script> 15 var cvs = document.getElementById("cvs"); 16 var ctx = cvs.getContext("2d"); 17 var side = 80; 18 var x = 250; 19 var y = 250; 20 21 function drawRect() { 22 ctx.fillStyle = "#0095DD"; 23 ctx.fillRect(200,200,side,side); 24 } 25 26 function draw() { 27 ctx.clearRect(0, 0, cvs.width, cvs.height); 28 drawRect(); 29 } 30 31 var move = (e) => { 32 var rect = e.target.getBoundingClientRect() ; 33 x = e.clientX - rect.left; 34 y = e.clientY - rect.top; 35 draw(); 36 } 37 38 cvs.addEventListener('load',drawRect()); 39 40 cvs.addEventListener('mousedown', ()=> { 41 cvs.addEventListener('mousemove',move); 42 }); 43 44 cvs.addEventListener('mouseup',()=> { 45 cvs.removeEventListener('mousemove',move); 46 }); 47 </script> 48 </body> 49</html> 50
試したこと
参考にしたソースコードと比較して見直してみた。
回答2件
0
javascript
1function drawRect() { 2 ctx.fillStyle = "#0095DD"; 3 ctx.fillRect(x,y,side,side); 4 }
投稿2022/11/18 00:33
総合スコア117680
0
ベストアンサー
正方形の描画はされるが、マウスドラッグをしても動かない。
描画の処理で変数 x と y を利用してないからでしょう。
投稿2022/11/17 21:43
総合スコア21929
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/11/18 01:01