回答編集履歴
3
コメントに対する回答を追加
test
CHANGED
|
@@ -79,3 +79,33 @@
|
|
|
79
79
|
NOTE:
|
|
80
80
|
|
|
81
81
|
このようにスクリーン描画に関わる処理を記述する場合は`setInterval`メソッドよりも`requestAnimationFrame`メソッドの方が適しています.
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
[コメントに対する回答]
|
|
88
|
+
|
|
89
|
+
これは, 「`null`値に`onclick`を設定しようとしている」から発生するエラーで,`null`値は`getElementById`メソッドが引数`gray`に対応するノードが見つからなかったために取得されています. ではなぜ`gray`に対応するノードが見つからないかというと, `document`ノードにまだ`gray`ノードが追加されていないのに`script`要素の内容を実行したからです. 要するに, `gray`の前に`script`要素が配置されているので発生しています.
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
NOTE:
|
|
94
|
+
|
|
95
|
+
WEBブラウザはHTMLを読み込んだ際, HTMLコードを先頭から順に解釈して現れたノードをDOMに追加していきます.途中`script`要素が見つかった場合は**その時点でスクリプトを実行**します.
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
ではどうすべきかというと,
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
- `gray`の後に`script`を配置する
|
|
104
|
+
|
|
105
|
+
- `document`の発する`DOMContentLoaded`イベントに初期化処理を登録する
|
|
106
|
+
|
|
107
|
+
- そのまま`gray`ノードの`onclick`属性に処理を記述する
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
のように修正します.
|
2
記述漏れ修正
test
CHANGED
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
|
|
63
63
|
```
|
|
64
64
|
|
|
65
|
-
その上で, このタイマー処理の中にグレイスケース化やセピア化等の画像編集処理を記述していきます. （
|
|
65
|
+
その上で, このタイマー処理の中にグレイスケース化やセピア化等の画像編集処理を記述していきます. （UI操作でその処理の中身を切り替えるわけです)
|
|
66
66
|
|
|
67
67
|
|
|
68
68
|
|
1
サンプルコードを詳細化
test
CHANGED
|
@@ -20,11 +20,49 @@
|
|
|
20
20
|
|
|
21
21
|
//ここにグラフィックを編集するコードを挿入する.
|
|
22
22
|
|
|
23
|
+
filter(canvas);
|
|
24
|
+
|
|
23
25
|
}, 1000/30);
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
//フィルタ関数群
|
|
30
|
+
|
|
31
|
+
function none(canvas){
|
|
32
|
+
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function grayFilter(canvas){
|
|
36
|
+
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
function sepiaFilter(canvas){
|
|
40
|
+
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
//現在のフィルタ関数
|
|
46
|
+
|
|
47
|
+
let filter = none;
|
|
48
|
+
|
|
49
|
+
//クリックイベントでフィルタ関数を書き換える
|
|
50
|
+
|
|
51
|
+
gray.onclick = function(e){
|
|
52
|
+
|
|
53
|
+
filter = grayFilter;
|
|
54
|
+
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
sepia.onclick = function(e){
|
|
58
|
+
|
|
59
|
+
filter = sepiaFilter;
|
|
60
|
+
|
|
61
|
+
};
|
|
24
62
|
|
|
25
63
|
```
|
|
26
64
|
|
|
27
|
-
その上で, このタイマー処理の中にグレイスケース化やセピア化等の画像編集処理を記述していきます.
|
|
65
|
+
その上で, このタイマー処理の中にグレイスケース化やセピア化等の画像編集処理を記述していきます. （イベントはその処理の中身を変えるわけです.
|
|
28
66
|
|
|
29
67
|
|
|
30
68
|
|