为什么我的 mousefollow 方法在不同的浏览器上不起作用

Question

这里是link给码笔 https://codepen.io/shahman28/pen/mdXraRE

这是我正在进行的一个更大项目的一部分。我试图在单击鼠标时放置圆圈。正如您在上面的代码笔中看到的那样，鼠标跟随得很好并将圆圈放置在正确的位置，但是当我尝试在浏览器中执行此操作时，光标与鼠标有偏移并且圆圈放置不正确。在 firefox 中它是完全任意的，但在 chrome 中它把它们放在光标的位置（这是在不正确的位置）。我正在回收以前项目中的一些代码，所以这就是 html 和 css.

中有边框的原因

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');

points = [];
class Mouse {
  constructor(c) {
    this.x = 0;
    this.y = 0;
    this.easing = 0.05;

    let rect = canvas.getBoundingClientRect();

    canvas.onmousemove = e => {
      this.x = e.clientX - rect.left;
      this.y = e.clientY - rect.top;
    }
  }

}

class Point {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
  }

  draw() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, 5, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();
  }
}

function random_hex_color_code() {
  let n = (Math.random() * 0xfffff * 1000000).toString(16);
  return '#' + n.slice(0, 6);
};

canvas.addEventListener('click', function(e) {

  let rect = canvas.getBoundingClientRect();
  x = e.clientX - rect.left
  y = e.clientY - rect.top;
  point = new Point(x, y, '#FF0000');
  points.push(point);
})
w = canvas.width = window.innerWidth,
  h = canvas.height = window.innerHeight,
  mousePosition = new Mouse(canvas);


function animate() {

  ctx.fillStyle = '#4A7DB9';
  ctx.beginPath();
  ctx.arc(mousePosition.x, mousePosition.y, 5, 0, Math.PI * 2);
  ctx.closePath();
  ctx.fill();
}

function handlePoints() {
  for (let i = 0; i < points.length; i++) {
    points[i].draw();
  }
}

function render() {
  ctx.clearRect(0, 0, w, h);
  handlePoints();
  animate();
  window.requestAnimationFrame(render);
}

render();

body {
  background: black;
}

#canvas1 {
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 600px;
  background: white;
}

<!DOCTYPE html>
<html lang="en">
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device.width, initial-scale=1.0">
  <title>Tower Defense</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <button onClick="start()">Start Combat</button>
  <canvas id="canvas1"></canvas>
  <script src="script.js"></script>
</body>

</html>

有谁知道如何使光标和放置的圆弧一致？

Answer 1

问题是 canvas 有时被设置为具有固定的 px 尺寸，而另一方面它被设置为具有视口的尺寸。

此代码段删除了样式表中的设置，仅使用视口尺寸。它似乎工作正常（在 Windows10 Edge/Chrome 和 Firefox 上测试）。

您需要决定您想要的设置并坚持使用，而不是尝试同时使用这两种设置，这会导致不一致。

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');

points = [];
class Mouse {
  constructor(c) {
    this.x = 0;
    this.y = 0;
    this.easing = 0.05;

    let rect = canvas.getBoundingClientRect();

    canvas.onmousemove = e => {
      this.x = e.clientX - rect.left;
      this.y = e.clientY - rect.top;
    }
  }

}

class Point {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
  }

  draw() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, 5, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();
  }
}

function random_hex_color_code() {
  let n = (Math.random() * 0xfffff * 1000000).toString(16);
  return '#' + n.slice(0, 6);
};

canvas.addEventListener('click', function(e) {

  let rect = canvas.getBoundingClientRect();
  x = e.clientX - rect.left
  y = e.clientY - rect.top;
  point = new Point(x, y, '#FF0000');
  points.push(point);
})
w = canvas.width = window.innerWidth,
  h = canvas.height = window.innerHeight,
  mousePosition = new Mouse(canvas);


function animate() {

  ctx.fillStyle = '#4A7DB9';
  ctx.beginPath();
  ctx.arc(mousePosition.x, mousePosition.y, 5, 0, Math.PI * 2);
  ctx.closePath();
  ctx.fill();
}

function handlePoints() {
  for (let i = 0; i < points.length; i++) {
    points[i].draw();
  }
}

function render() {
  ctx.clearRect(0, 0, w, h);
  handlePoints();
  animate();
  window.requestAnimationFrame(render);
}

render();

body {
  background: black;
}

#canvas1 {
  border: 1px solid black;
  position: absolute;
  left 0;
  top: 0;
  /* removed 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 600px;
  */
  background: white;
}

<meta name="viewport" content="width=device.width, initial-scale=1.0">
<!--<button onClick = "start()">Start Combat</button>-->
<canvas id="canvas1"></canvas>

为什么我的 mousefollow 方法在不同的浏览器上不起作用

Why does my mousefollow method not work on different browsers

html

javascript

css

html5-canvas