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

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

新規登録して質問してみよう
ただいま回答率
85.48%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

883閲覧

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

pussy_pussy

総合スコア22

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/11/18 01:09

実現したいこと

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関数を別々に定義してみたが、やっていることは同じなので結果は変わらなかった。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

js

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

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

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

投稿2022/11/18 01:17

int32_t

総合スコア20850

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問