回答編集履歴
1
コードを追加
test
CHANGED
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
|
|
87
87
|
|
|
88
88
|
|
|
89
|
-
//イベントはdiv要素で受ける
|
|
89
|
+
//(1)イベントはdiv要素で受ける場合
|
|
90
90
|
|
|
91
91
|
div.onmousemove = e => {
|
|
92
92
|
|
|
@@ -97,6 +97,48 @@
|
|
|
97
97
|
const [x, y] = [e.offsetX, e.offsetY];
|
|
98
98
|
|
|
99
99
|
ctx.fillRect(x - 2, y - 2, 4, 4);
|
|
100
|
+
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
//--------------------------------------------------------
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
//(2)canvas側の処理を触れない場合
|
|
110
|
+
|
|
111
|
+
//canvas側の描画処理(元からあるものを触らない)
|
|
112
|
+
|
|
113
|
+
canvas.onmousemove = e => {
|
|
114
|
+
|
|
115
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
116
|
+
|
|
117
|
+
const [x, y] = [e.offsetX, e.offsetY];
|
|
118
|
+
|
|
119
|
+
ctx.fillRect(x - 2, y - 2, 4, 4);
|
|
120
|
+
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
//div要素で受けたイベントを元にcanvas要素側のイベントをトリガ
|
|
124
|
+
|
|
125
|
+
//NOTE:パラメータは必要に応じて追加する
|
|
126
|
+
|
|
127
|
+
div.onmousemove = e => {
|
|
128
|
+
|
|
129
|
+
canvas.dispatchEvent(new MouseEvent("mousemove", {
|
|
130
|
+
|
|
131
|
+
bubbles: false,//これがないと無限ループする
|
|
132
|
+
|
|
133
|
+
clientX: e.clientX,
|
|
134
|
+
|
|
135
|
+
clientY: e.clientY,
|
|
136
|
+
|
|
137
|
+
offsetX: e.offsetX,
|
|
138
|
+
|
|
139
|
+
offsetY: e.offsetY
|
|
140
|
+
|
|
141
|
+
}));
|
|
100
142
|
|
|
101
143
|
};
|
|
102
144
|
|