回答編集履歴
3
コメントに対する回答を追加
answer
CHANGED
|
@@ -38,4 +38,19 @@
|
|
|
38
38
|
|
|
39
39
|
---
|
|
40
40
|
NOTE:
|
|
41
|
-
このようにスクリーン描画に関わる処理を記述する場合は`setInterval`メソッドよりも`requestAnimationFrame`メソッドの方が適しています.
|
|
41
|
+
このようにスクリーン描画に関わる処理を記述する場合は`setInterval`メソッドよりも`requestAnimationFrame`メソッドの方が適しています.
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
[コメントに対する回答]
|
|
45
|
+
これは, 「`null`値に`onclick`を設定しようとしている」から発生するエラーで,`null`値は`getElementById`メソッドが引数`gray`に対応するノードが見つからなかったために取得されています. ではなぜ`gray`に対応するノードが見つからないかというと, `document`ノードにまだ`gray`ノードが追加されていないのに`script`要素の内容を実行したからです. 要するに, `gray`の前に`script`要素が配置されているので発生しています.
|
|
46
|
+
|
|
47
|
+
NOTE:
|
|
48
|
+
WEBブラウザはHTMLを読み込んだ際, HTMLコードを先頭から順に解釈して現れたノードをDOMに追加していきます.途中`script`要素が見つかった場合は**その時点でスクリプトを実行**します.
|
|
49
|
+
|
|
50
|
+
ではどうすべきかというと,
|
|
51
|
+
|
|
52
|
+
- `gray`の後に`script`を配置する
|
|
53
|
+
- `document`の発する`DOMContentLoaded`イベントに初期化処理を登録する
|
|
54
|
+
- そのまま`gray`ノードの`onclick`属性に処理を記述する
|
|
55
|
+
|
|
56
|
+
のように修正します.
|
2
記述漏れ修正
answer
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
filter = sepiaFilter;
|
|
31
31
|
};
|
|
32
32
|
```
|
|
33
|
-
その上で, このタイマー処理の中にグレイスケース化やセピア化等の画像編集処理を記述していきます. （
|
|
33
|
+
その上で, このタイマー処理の中にグレイスケース化やセピア化等の画像編集処理を記述していきます. （UI操作でその処理の中身を切り替えるわけです)
|
|
34
34
|
|
|
35
35
|
---
|
|
36
36
|
NOTE:
|
1
サンプルコードを詳細化
answer
CHANGED
|
@@ -9,9 +9,28 @@
|
|
|
9
9
|
var canvas = document.getElementById("c");
|
|
10
10
|
canvas.getContext("2d").drawImage(video, 0, 0, 480, 270);
|
|
11
11
|
//ここにグラフィックを編集するコードを挿入する.
|
|
12
|
+
filter(canvas);
|
|
12
13
|
}, 1000/30);
|
|
14
|
+
|
|
15
|
+
//フィルタ関数群
|
|
16
|
+
function none(canvas){
|
|
17
|
+
}
|
|
18
|
+
function grayFilter(canvas){
|
|
19
|
+
}
|
|
20
|
+
function sepiaFilter(canvas){
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
//現在のフィルタ関数
|
|
24
|
+
let filter = none;
|
|
25
|
+
//クリックイベントでフィルタ関数を書き換える
|
|
26
|
+
gray.onclick = function(e){
|
|
27
|
+
filter = grayFilter;
|
|
28
|
+
};
|
|
29
|
+
sepia.onclick = function(e){
|
|
30
|
+
filter = sepiaFilter;
|
|
31
|
+
};
|
|
13
32
|
```
|
|
14
|
-
その上で, このタイマー処理の中にグレイスケース化やセピア化等の画像編集処理を記述していきます.
|
|
33
|
+
その上で, このタイマー処理の中にグレイスケース化やセピア化等の画像編集処理を記述していきます. （イベントはその処理の中身を変えるわけです.
|
|
15
34
|
|
|
16
35
|
---
|
|
17
36
|
NOTE:
|