Как рисовать на холсте, используя координаты x, y относительно холста

Question

Итак, я пытаюсь сделать игру, в которой вы будете стрелять по объектам. Однако я застрял в определении того, где пользователь щелкает. У меня холст и круг посередине. Цель состоит в том, чтобы нарисовать круг, когда бы я ни нажимал на холст, однако круг немного отрисовывается от курсора. Расстояние между кругом и курсором зависит от того, насколько близко курсор находится от верхнего левого угла холста, где чем дальше щелчок от верхнего левого угла, тем дальше расстояние между местом, где нарисован круг, и где я на самом деле щелкнул.

Вот как выглядит веб-сайт и как далеко нарисован круг, поскольку я не могу показать курсор на скриншотах, я нажал на центр белого круга, и вот здесь он нарисовал красный круг : изображение сайта

А это код

const canvas = document.querySelector('canvas')
const dimensions = canvas.getBoundingClientRect()
canvas.width = dimensions.width * devicePixelRatio
canvas.height = dimensions.height * devicePixelRatio
const c = canvas.getContext('2d')


class Player {
  constructor(x, y, radius, color) {
    this.x = x
    this.y = y
    this.radius = radius
    this.color = color
  }

  draw() {
    c.beginPath()
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
    c.fillStyle = this.color
    c.fill()
  }
}

class Projectile {
  constructor(x, y, radius, color, speed) {
    this.x = x
    this.y = y
    this.radius = radius
    this.color = color
    this.speed = speed
  }

  draw() {
    c.beginPath()
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
    c.fillStyle = this.color
    c.fill()
  }
}

// get the center of canvas
const x = canvas.width / 2
const y = canvas.height / 2

// make player
const player = new Player(x, y, 50, 'white')

player.draw()


// get the mouse position relative to the canvas and not the window
function getCursorPositionX(canvas, event) {
  const rect = canvas.getBoundingClientRect()
  const xc = event.clientX - rect.left
  return xc
}

function getCursorPositionY(canvas, event) {
  const rect = canvas.getBoundingClientRect()
  const yc = event.clientY - rect.top
  return yc
}

// add an event listner to detect clicks
canvas.addEventListener('mousedown', function(e) {

  const projectile = new Projectile(getCursorPositionX(canvas, e), getCursorPositionY(canvas, e), 10, 'red', null)
  console.log(getCursorPositionX(canvas, e), getCursorPositionX(canvas, e))
  projectile.draw()
})

.gameWindow {
  box-sizing: border-box;
  border: 2px solid black;
  width: 95%;
  background-color: #232323;
}

<div class="page-content center">
  <h1 class="title2">Quick Shot</h1>
  <canvas class="gameWindow"></canvas>
  <script src=./index.js></script>
</div>

Как рисовать на холсте, используя координаты x, y относительно холста

Ответы (0)