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

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

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

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

JavaScript

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

Q&A

2回答

436閲覧

イベントオブジェクトeがundefined

yama_u

総合スコア16

canvas

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

JavaScript

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

0グッド

1クリップ

投稿2023/01/22 05:52

前提

メジャーなブラウザで実行できるはずです

実現したいこと

マウスドラッグで動かせる2つの正方形があり(右クリック、左クリックそれぞれに実装)、
重なり合ったら、色が変わるようにしたい。

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

38行目のe:undefined

該当のソースコード

html

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 ctx.fillStyle = "rgb(255,255,255)" 17 var side = 80; 18 19 function Square(x,y){ 20 this.x = x; 21 this.y = y; 22 23 this.drawRect = function(rgb) { 24 ctx.fillStyle = rgb; 25 ctx.fillRect(this.x,this.y,side,side); 26 } 27 28 this.move = (e) => { 29 var rect = e.target.getBoundingClientRect(); 30 this.x = e.clientX - rect.left; 31 this.y = e.clientY - rect.top; 32 ctx.clearRect(0, 0, cvs.width, cvs.height); 33 s1.drawRect("rgb(0,255,0)"); 34 s2.drawRect("rgb(255,0,0)"); 35 } 36 37 this.getX = function(e) { 38 var rect = e.target.getBoundingClientRect(); 39 this.x = e.clientX - rect.left; 40 return this.x; 41 } 42 43 this.getY = function(e) { 44 var rect = e.target.getBoundingClientRect(); 45 this.y = e.clientY - rect.top; 46 return this.y; 47 } 48 49 this.double = function(me,a,b) { 50 var me = this; 51 var x1=me.getX(); 52 var y1=me.getY()+80; 53 var x2=x1+80; 54 var y2=me.getY(); 55 var x3=a; 56 var y3=b+80; 57 var x4=x3+80; 58 var y4=b; 59 60 if((Math.max(x1, x3) < Math.min(x2, x4)) & (Math.max(y1, y3) < Math.min(y2, y4))){ 61 ctx.fillStyle("rgb(0,0,255)") 62 ctx.fillRect(Math.max(x1, x3),Math.max(y1, y3),Math.min(x2, x4),Math.min(y2, y4)); 63 } 64 } 65 } 66 67 s1 = new Square(250,50); 68 s2 = new Square(400,50); 69 70 cvs.addEventListener('load',s1.drawRect("rgb(0,255,0)")); 71 cvs.addEventListener('load',s2.drawRect("rgb(255,0,0)")); 72 73 cvs.addEventListener('click', ()=> { 74 cvs.addEventListener('mousemove',s1.move); 75 cvs.addEventListener('mousemove',s1.getX()); 76 cvs.addEventListener('mousemove',s1.getY()); 77 cvs.addEventListener('mousemove',s1.double(s2.getX(),s2.getY())); 78 s1.drawRect("rgb(0,255,0)"); 79 }); 80 81 cvs.oncontextmenu = function () { 82 event.preventDefault(); 83 cvs.addEventListener('mousemove',s2.move); 84 cvs.addEventListener('mousemove',s2.getX()); 85 cvs.addEventListener('mousemove',s2.getY()); 86 cvs.addEventListener('mousemove',s2.double(s1.getX(),s1.getY())); 87 s2.drawRect("rgb(255,0,0)"); 88 return false; 89 }; 90 91 cvs.addEventListener('mouseup',()=> { 92 cvs.removeEventListener('mousemove',s1.move); 93 }); 94 cvs.addEventListener('mouseup',()=> { 95 cvs.removeEventListener('mousemove',s2.move); 96 }); 97 </script> 98 </body> 99</html>

試したこと

canvasにおけるaddEventListenerで複数の関数を登録できることは調べて確認した。
関数の文法(?)に変な点がないかどうかも確認した。

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

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

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

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

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

guest

回答2

0

js

1 cvs.addEventListener('mousemove',s1.getX()); 2 cvs.addEventListener('mousemove',s1.getY()); 3... 4 cvs.addEventListener('mousemove',s2.getX()); 5 cvs.addEventListener('mousemove',s2.getY());

これらの行で引数なしで getX() getY() を呼び出しているためです。ここでは関数を呼びたいのではなく関数を引数として渡したいはずなので () が不要なのですが、たぶん s1.getX.bind(s1) などと書く必要がありそうです。

他にも引数なしでgetX()を呼んでいる箇所があります。それらは実際に関数を呼び出したいように見えますが、getX() は引数がないと動きません。コードの設計が間違っているように見えます。おそらく getX() getY() はイベントリスナとして登録すべきものではないですね。

投稿2023/01/22 09:38

編集2023/01/22 22:55
int32_t

総合スコア20533

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

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

0

s1,s2がHTML要素ではないのでgetBoundingClientRectメソッドはもっていません。
canvasでやる限りs1,s2要素のx,yプロパティを参照してローレベルに交差を検証するのが妥当です

投稿2023/01/22 07:02

yambejp

総合スコア114390

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問