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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

0回答

368閲覧

HTML canvas の画面遷移 ボタンの判定

atsk

総合スコア0

canvas

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2020/10/12 23:50

編集2022/01/12 10:55

前提・実現したいこと

・切り替えた画面に応じたボタンの判定をさせたい

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

・その画面に行き着く前に、ボタンが押された判定をしてしまう ・押していないボタンまでもが反応する

該当のソースコード

javascript

1var cvs = document.getElementById('cvs1'); 2var ctx = cvs.getContext('2d'); 3 4var x = 0; 5var y = 0; 6function onClick(e) { 7 var rect = e.target.getBoundingClientRect(); 8 x = e.clientX - rect.left; 9 y = e.clientY - rect.top; 10 11 move(); 12} 13 14window.onload = function () { 15 16 //2Dコンテキストのオブジェクトを生成する 17 var cvs = document.getElementById('cvs1'); 18 var ctx = cvs.getContext('2d'); 19 20 //画像オブジェクトを生成 21 //画像をcanvasに設定 22 23 24} 25 26function q1() { 27 if (200 < x && x < 395 && 200 < y && y < 245) { 28 ctx.clearRect(0, 0, 600, 300); 29 //画像オブジェクトを生成 30 //画像をcanvasに設定 31 } 32 33} 34 35function q1a2() { 36 ctx.clearRect(0, 0, 600, 300); 37 //画像オブジェクトを生成 38 //画像をcanvasに設定 39 } 40 if (200 < x && x < 395 && 200 < y && y < 245) { 41 42 q1(); 43 } 44} 45 46function q1a3() { 47 ctx.clearRect(0, 0, 600, 300); 48 //画像オブジェクトを生成 49 //画像をcanvasに設定 50 51 if (200 < x && x < 395 && 200 < y && y < 245) { 52 53 q1(); 54 } 55} 56 57var count = 1 58 59function move() { 60 61 if (count == 4 && 40 < x && x < 365 && 40 < y && y < 70) { 62 ctx.clearRect(0, 0, 600, 300); 63 //画像オブジェクトを生成 64 //画像をcanvasに設定 65 66 count = 5; 67 } 68 69 if (count == 4 && 45 < x && x < 325 && 128 < y && y < 157) { 70 q1a2(); 71 alert("q1a2") 72 73 } else if (45 < x && x < 388 && 210 < y && y < 247) { 74 q1a3(); 75 76 } 77 78 79 80 if (count == 3) { 81 q1(); 82 count = count + 1; 83 } 84 85 if (count == 2) { 86 if (200 < x && x < 395 && 200 < y && y < 245) { 87 ctx.clearRect(0, 0, 600, 300); 88 //画像オブジェクトを生成 89 //画像をcanvasに設定 90 91 } 92 count = count + 1; 93 } 94 95 if (count == 1) { 96 if (200 < x && x < 395 && 200 < y && y < 245) { 97 98 ctx.clearRect(0, 0, 600, 300); 99 100 //画像オブジェクトを生成 101 //画像をcanvasに設定 102 103 } 104 count = count + 1; 105 } 106} 107 108 109cvs.addEventListener('click', onClick, false);

html

1<canvas id="cvs1" width="600" height="300"></canvas> 2 <script type="text/javascript" src="js/a.js"></script> 3

試したこと

if文の入れ替え

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

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

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

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

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

m.ts10806

2020/10/13 00:41

「すいい(推移)」ではなく「せんい(遷移)」ではないでしょうか
atsk

2020/10/13 00:42

そうです記入ミスです
yambejp

2020/10/13 00:49

存在しない画像をしている箇所が多すぎて、 もう少し整理できないですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問