回答編集履歴
1
コードを追加
answer
CHANGED
|
@@ -42,13 +42,34 @@
|
|
|
42
42
|
[canvas.width, canvas.height] = [parseInt(style.width), parseInt(style.height)];
|
|
43
43
|
const ctx = canvas.getContext("2d");
|
|
44
44
|
|
|
45
|
-
//イベントはdiv要素で受ける
|
|
45
|
+
//(1)イベントはdiv要素で受ける場合
|
|
46
46
|
div.onmousemove = e => {
|
|
47
47
|
//例えばパーティクルの描画処理
|
|
48
48
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
49
49
|
const [x, y] = [e.offsetX, e.offsetY];
|
|
50
50
|
ctx.fillRect(x - 2, y - 2, 4, 4);
|
|
51
51
|
};
|
|
52
|
+
|
|
53
|
+
//--------------------------------------------------------
|
|
54
|
+
|
|
55
|
+
//(2)canvas側の処理を触れない場合
|
|
56
|
+
//canvas側の描画処理(元からあるものを触らない)
|
|
57
|
+
canvas.onmousemove = e => {
|
|
58
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
59
|
+
const [x, y] = [e.offsetX, e.offsetY];
|
|
60
|
+
ctx.fillRect(x - 2, y - 2, 4, 4);
|
|
61
|
+
};
|
|
62
|
+
//div要素で受けたイベントを元にcanvas要素側のイベントをトリガ
|
|
63
|
+
//NOTE:パラメータは必要に応じて追加する
|
|
64
|
+
div.onmousemove = e => {
|
|
65
|
+
canvas.dispatchEvent(new MouseEvent("mousemove", {
|
|
66
|
+
bubbles: false,//これがないと無限ループする
|
|
67
|
+
clientX: e.clientX,
|
|
68
|
+
clientY: e.clientY,
|
|
69
|
+
offsetX: e.offsetX,
|
|
70
|
+
offsetY: e.offsetY
|
|
71
|
+
}));
|
|
72
|
+
};
|
|
52
73
|
});
|
|
53
74
|
```
|
|
54
75
|
|