HTML5 Canvas: マウスに追従する円がずれてしまいます。

お世話になっております。HTML5 Canvasを使用しマウスの動きに追従する縁を作成中です。その円がマウスの位置からからずれてしまっているので正しく動くようアドバイス頂けたら嬉しいです。

マウス追従の円以外にも別の円を作りたいため、クラスを使っております。
よろしくお願い致します。

JavaScript
1const canvas = document.getElementById("canvas");
2const c = canvas.getContext("2d");
3
4let Circle = function(x, y, radius){
5  this.x = x;
6  this.y = y;
7  this.radius = radius;
8  
9  this.update = function(){
10    c.beginPath();
11    c.arc(this.x, this.y, 10, Math.PI * 2, false);
12    c.fillStyle = "red";
13    c.fill();
14    c.stroke();
15  };
16};
17
18let mouse = {
19  x: undefined,
20  y: undefined
21};
22
23canvas.addEventListener("mousemove", function(event){
24  let canvasRect = canvas.getBoundingClientRect();
25  mouse.x = event.clientX;
26  Mouse.y = event.clientY;
27});
28
29function init(){
30 let circle1 = new Circle(undefined, undefined, 10);
31}
32
33function update(){
34  circle1.moveTo(mouse.x, mouse.y);
35  window.setTimeout(update, 10);
36}
37
38function animate(){
39  requestAnimationFrame(animate);
40  c.clearRect(0, 0, canvas.width, canvas.height);
41  circle1.x = mouse.x;
42  circle1.y = mouse.y;
43  circle.update();
44}
45
46init();
47animate();

int32_t

2021/10/05 06:08 編集

問題を再現しやすいよう、HTMLも開示してください。ずれる、とはどの方向にどれぐらいずれるのでしょうか。ずれる以前の問題が多く含まれていて、このコード動かないですよね? > const canvas = document.getElementById(“canvas); > Const c = canvas.getContext(“2d”); > c.fillStyle = “red”; > canvas.addEventListener(“mousemove”, function(event){ > function animate(){ > Animate();

退会済みユーザー

2021/10/05 06:11

こちらがHTMLになります。 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <canvas id="canvas" width="578" height="250"></canvas> <script src="script.js"></script> </body> </html> 右下の方向に円がずれてしまいます。タイピングミスご指摘ありがとうございます。こちらに手打ちする際大文字になってしまいました。

yambejp

2021/10/05 06:15 編集

typoがひどいのでまずは最低限修正ください・全角の「“”」は使えません(閉じ忘れにも注意) ・変数名の大文字小文字を区別します(AnimateとかMouseとか)

int32_t

2021/10/05 06:15

動かないコードを示されても的確な回答はできないので、手打ちではなくコピペしましょう。

行動規範の内容に同意します

回答1件

js
1canvas.addEventListener("mousemove", function(event){
2  let canvasRect = canvas.getBoundingClientRect();
3  mouse.x = event.clientX;
4  mouse.y = event.clientY;
5});