質問編集履歴
2
テキスト修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -136,6 +136,8 @@
|
|
|
136
136
|
|
|
137
137
|
|
|
138
138
|
|
|
139
|
+
また、下記コードの部分は、let ctx にdrawImage()関数を実行 という解釈でいいでしょうか？
|
|
140
|
+
|
|
139
141
|
```javascript
|
|
140
142
|
|
|
141
143
|
//キャンバスに画像を描画（開始位置0,0）
|
|
@@ -143,5 +145,3 @@
|
|
|
143
145
|
ctx.drawImage(image, 0, 0);
|
|
144
146
|
|
|
145
147
|
```
|
|
146
|
-
|
|
147
|
-
また、下記コードの部分は、let ctx にdrawImage()関数を実行 という解釈でいいでしょうか？
|
1
質問内容を修正いたしました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
javascript コードの解釈について
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<canvas>
|
|
1
|
+
<canvas>タグにjavascriptの画像を読み込ませ、テキストを入力するプログラムを、ネットの記事を参照して下記コードを書きました。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
@@ -6,11 +6,19 @@
|
|
|
6
6
|
|
|
7
7
|
<body onload="loadImage('preview');">
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
<div class="col-md-8">
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
<p><canvas id="preview"></canvas></p>
|
|
12
12
|
|
|
13
|
+
<p>
|
|
14
|
+
|
|
15
|
+
<input type="text" id="canvas_text" value="我輩は犬である">
|
|
16
|
+
|
|
17
|
+
<button onclick="drawText('preview', 'canvas_text');">文字を描く</button>
|
|
18
|
+
|
|
19
|
+
</p>
|
|
20
|
+
|
|
13
|
-
|
|
21
|
+
</div>
|
|
14
22
|
|
|
15
23
|
</body>
|
|
16
24
|
|
|
@@ -18,84 +26,122 @@
|
|
|
18
26
|
|
|
19
27
|
|
|
20
28
|
|
|
29
|
+
|
|
30
|
+
|
|
21
31
|
```javascript
|
|
22
32
|
|
|
23
|
-
|
|
33
|
+
//キャンバスに画像を描画する
|
|
24
34
|
|
|
25
|
-
|
|
35
|
+
function loadImage(id) {
|
|
26
36
|
|
|
27
|
-
|
|
37
|
+
//画像を読み込んでImageオブジェクトを作成する
|
|
28
38
|
|
|
29
|
-
|
|
39
|
+
let image = new Image();
|
|
30
40
|
|
|
41
|
+
image.src = 'images/canvas.png';
|
|
31
42
|
|
|
43
|
+
image.onload = (function() {
|
|
32
44
|
|
|
33
|
-
|
|
45
|
+
//画像ロードが完了してからキャンバスの準備をする
|
|
34
46
|
|
|
35
|
-
e
|
|
47
|
+
let canvas = document.getElementById(id);
|
|
36
48
|
|
|
37
|
-
|
|
49
|
+
let ctx = canvas.getContext('2d');
|
|
38
50
|
|
|
39
|
-
|
|
51
|
+
//キャンバスのサイズを画像サイズに合わせる
|
|
40
52
|
|
|
41
|
-
|
|
53
|
+
canvas.width = image.width;
|
|
42
54
|
|
|
43
|
-
va
|
|
55
|
+
canvas.height = image.height;
|
|
44
56
|
|
|
45
|
-
|
|
57
|
+
//キャンバスに画像を描画（開始位置0,0）
|
|
46
58
|
|
|
47
|
-
image
|
|
59
|
+
ctx.drawImage(image, 0, 0);
|
|
48
60
|
|
|
49
|
-
|
|
61
|
+
});
|
|
50
62
|
|
|
51
|
-
|
|
63
|
+
}
|
|
52
64
|
|
|
53
|
-
|
|
65
|
+
//キャンバスに文字を描く
|
|
54
66
|
|
|
55
|
-
|
|
67
|
+
function drawText(canvas_id, text_id) {
|
|
56
68
|
|
|
57
|
-
canvas
|
|
69
|
+
let canvas = document.getElementById(canvas_id);
|
|
58
70
|
|
|
59
|
-
canvas.
|
|
71
|
+
let ctx = canvas.getContext('2d');
|
|
60
72
|
|
|
61
|
-
|
|
73
|
+
let text = document.getElementById(text_id);
|
|
62
74
|
|
|
63
|
-
|
|
75
|
+
//文字のスタイルを指定
|
|
64
76
|
|
|
65
|
-
|
|
77
|
+
ctx.font = '32px serif';
|
|
66
78
|
|
|
67
|
-
|
|
79
|
+
ctx.fillStyle = '#404040';
|
|
68
80
|
|
|
69
|
-
|
|
81
|
+
//文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
|
|
70
82
|
|
|
71
|
-
|
|
83
|
+
ctx.textBaseline = 'center';
|
|
72
84
|
|
|
73
|
-
|
|
85
|
+
ctx.textAlign = 'center';
|
|
86
|
+
|
|
87
|
+
//座標を指定して文字を描く（座標は画像の中心に）
|
|
88
|
+
|
|
89
|
+
let x = (canvas.width / 2);
|
|
90
|
+
|
|
91
|
+
let y = (canvas.height / 2);
|
|
92
|
+
|
|
93
|
+
ctx.fillText(text.value, x, y);
|
|
94
|
+
|
|
95
|
+
}
|
|
74
96
|
|
|
75
97
|
```
|
|
76
98
|
|
|
77
99
|
|
|
78
100
|
|
|
79
|
-
|
|
101
|
+
ブラウザが読み込まれたら、 function loadImage(id)のscript処理が実行されて画像が表示され、入力したテキストが画像に表示されます。
|
|
80
102
|
|
|
81
|
-
```html
|
|
82
103
|
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
2点解釈できていないscriptコードがあります。
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
```javascript
|
|
112
|
+
|
|
113
|
+
image.onload = (function() {
|
|
114
|
+
|
|
115
|
+
//画像ロードが完了してからキャンバスの準備をする
|
|
116
|
+
|
|
117
|
+
let canvas = document.getElementById(id);
|
|
118
|
+
|
|
83
|
-
|
|
119
|
+
let ctx = canvas.getContext('2d');
|
|
120
|
+
|
|
121
|
+
//キャンバスのサイズを画像サイズに合わせる
|
|
122
|
+
|
|
123
|
+
canvas.width = image.width;
|
|
124
|
+
|
|
125
|
+
canvas.height = image.height;
|
|
126
|
+
|
|
127
|
+
//キャンバスに画像を描画（開始位置0,0）
|
|
128
|
+
|
|
129
|
+
ctx.drawImage(image, 0, 0);
|
|
130
|
+
|
|
131
|
+
});
|
|
84
132
|
|
|
85
133
|
```
|
|
86
134
|
|
|
87
|
-
|
|
135
|
+
上記コードは image.onload に 以降の function()処理結果を代入。しているのだと思うのですが、image.onloadは代入された関数の処理をどこに渡しているのでしょうか？ image.onloadの役割がわかりません。。。
|
|
88
136
|
|
|
89
137
|
|
|
90
138
|
|
|
91
|
-
|
|
139
|
+
```javascript
|
|
92
140
|
|
|
93
|
-
|
|
141
|
+
//キャンバスに画像を描画（開始位置0,0）
|
|
94
142
|
|
|
95
|
-
|
|
143
|
+
ctx.drawImage(image, 0, 0);
|
|
96
144
|
|
|
97
|
-
|
|
145
|
+
```
|
|
98
146
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
147
|
+
また、下記コードの部分は、let ctx にdrawImage()関数を実行 という解釈でいいでしょうか？
|