質問編集履歴
2
写真部分の削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,12 +17,6 @@
|
|
|
17
17
|
var x = 0;
|
|
18
18
|
var y = 0;
|
|
19
19
|
function onClick(e) {
|
|
20
|
-
/*
|
|
21
|
-
* rectでcanvasの絶対座標位置を取得し、
|
|
22
|
-
* クリック座標であるe.clientX,e.clientYからその分を引く
|
|
23
|
-
* ※クリック座標はdocumentからの位置を返すため
|
|
24
|
-
* ※rectはスクロール量によって値が変わるので、onClick()内でつど定義
|
|
25
|
-
*/
|
|
26
20
|
var rect = e.target.getBoundingClientRect();
|
|
27
21
|
x = e.clientX - rect.left;
|
|
28
22
|
y = e.clientY - rect.top;
|
|
@@ -37,29 +31,16 @@
|
|
|
37
31
|
var ctx = cvs.getContext('2d');
|
|
38
32
|
|
|
39
33
|
//画像オブジェクトを生成
|
|
40
|
-
|
|
34
|
+
//画像をcanvasに設定
|
|
41
|
-
img.src = "picture/start.png";
|
|
42
35
|
|
|
43
36
|
|
|
44
|
-
//画像をcanvasに設定
|
|
45
|
-
img.onload = function () {
|
|
46
|
-
ctx.drawImage(img, 0, 0, 600, 300);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
37
|
}
|
|
50
38
|
|
|
51
39
|
function q1() {
|
|
52
40
|
if (200 < x && x < 395 && 200 < y && y < 245) {
|
|
53
41
|
ctx.clearRect(0, 0, 600, 300);
|
|
54
42
|
//画像オブジェクトを生成
|
|
55
|
-
var img = new Image();
|
|
56
|
-
img.src = "picture/cpaeq1.png";
|
|
57
|
-
|
|
58
|
-
|
|
59
43
|
//画像をcanvasに設定
|
|
60
|
-
img.onload = function () {
|
|
61
|
-
ctx.drawImage(img, 0, 0, 600, 300);
|
|
62
|
-
}
|
|
63
44
|
}
|
|
64
45
|
|
|
65
46
|
}
|
|
@@ -67,13 +48,7 @@
|
|
|
67
48
|
function q1a2() {
|
|
68
49
|
ctx.clearRect(0, 0, 600, 300);
|
|
69
50
|
//画像オブジェクトを生成
|
|
70
|
-
var img = new Image();
|
|
71
|
-
img.src = "picture/cpaeq1a2.png";
|
|
72
|
-
|
|
73
|
-
|
|
74
51
|
//画像をcanvasに設定
|
|
75
|
-
img.onload = function () {
|
|
76
|
-
ctx.drawImage(img, 0, 0, 600, 300);
|
|
77
52
|
}
|
|
78
53
|
if (200 < x && x < 395 && 200 < y && y < 245) {
|
|
79
54
|
|
|
@@ -84,14 +59,8 @@
|
|
|
84
59
|
function q1a3() {
|
|
85
60
|
ctx.clearRect(0, 0, 600, 300);
|
|
86
61
|
//画像オブジェクトを生成
|
|
87
|
-
|
|
62
|
+
//画像をcanvasに設定
|
|
88
|
-
img.src = "picture/cpaeq1a3.png";
|
|
89
63
|
|
|
90
|
-
|
|
91
|
-
//画像をcanvasに設定
|
|
92
|
-
img.onload = function () {
|
|
93
|
-
ctx.drawImage(img, 0, 0, 600, 300);
|
|
94
|
-
}
|
|
95
64
|
if (200 < x && x < 395 && 200 < y && y < 245) {
|
|
96
65
|
|
|
97
66
|
q1();
|
|
@@ -104,15 +73,9 @@
|
|
|
104
73
|
|
|
105
74
|
if (count == 4 && 40 < x && x < 365 && 40 < y && y < 70) {
|
|
106
75
|
ctx.clearRect(0, 0, 600, 300);
|
|
107
|
-
//画像オブジェクトを生成
|
|
76
|
+
//画像オブジェクトを生成
|
|
108
|
-
var img = new Image();
|
|
109
|
-
img.src = "picture/cpaeq1a1.png";
|
|
110
|
-
|
|
111
|
-
|
|
112
77
|
//画像をcanvasに設定
|
|
113
|
-
|
|
78
|
+
|
|
114
|
-
ctx.drawImage(img, 0, 0, 600, 300);
|
|
115
|
-
}
|
|
116
79
|
count = 5;
|
|
117
80
|
}
|
|
118
81
|
|
|
@@ -136,14 +99,8 @@
|
|
|
136
99
|
if (200 < x && x < 395 && 200 < y && y < 245) {
|
|
137
100
|
ctx.clearRect(0, 0, 600, 300);
|
|
138
101
|
//画像オブジェクトを生成
|
|
139
|
-
|
|
102
|
+
//画像をcanvasに設定
|
|
140
|
-
img.src = "picture/cpae2.png";
|
|
141
103
|
|
|
142
|
-
|
|
143
|
-
//画像をcanvasに設定
|
|
144
|
-
img.onload = function () {
|
|
145
|
-
ctx.drawImage(img, 0, 0, 600, 300);
|
|
146
|
-
}
|
|
147
104
|
}
|
|
148
105
|
count = count + 1;
|
|
149
106
|
}
|
|
@@ -154,14 +111,8 @@
|
|
|
154
111
|
ctx.clearRect(0, 0, 600, 300);
|
|
155
112
|
|
|
156
113
|
//画像オブジェクトを生成
|
|
157
|
-
|
|
114
|
+
//画像をcanvasに設定
|
|
158
|
-
img.src = "picture/cpae1.png";
|
|
159
115
|
|
|
160
|
-
|
|
161
|
-
//画像をcanvasに設定
|
|
162
|
-
img.onload = function () {
|
|
163
|
-
ctx.drawImage(img, 0, 0, 600, 300);
|
|
164
|
-
}
|
|
165
116
|
}
|
|
166
117
|
count = count + 1;
|
|
167
118
|
}
|
1
タイトル修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
HTML canvas の画面
|
|
1
|
+
HTML canvas の画面遷移 ボタンの判定
|
body
CHANGED
|
File without changes
|