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

avatar
FaresFilms
8 августа 2021 в 16:39
127
0
0

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

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

А это код

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>
Источник
Mike 'Pomax' Kamermans
8 августа 2021 в 16:46
0

Все координаты холста по определению относятся к верхнему левому углу холста. Поэтому, если вы хотите сделать «где находится курсор пользователя», вы получите координаты события мыши/касания offsetX/offsetY, и они должны немедленно работать.

LeeLenalee
8 августа 2021 в 16:49
0

Проблема, вероятно, где-то еще в вашем коде, которым вы не поделились, как вы можете видеть из интерактивного кода, он работает так, как вы ожидаете.

Mike 'Pomax' Kamermans
8 августа 2021 в 16:52
0

(и примечание: использование offsetX/offsetY всегда будет работать, даже если вы используете преобразования CSS, например, jsbin.com/kijaxetewu/edit?css,js,output<6450433)

Justin
8 августа 2021 в 17:12
0

Удалите ширину: 95%, и все работает нормально.

FaresFilms
9 августа 2021 в 08:48
0

@LeeLenalee Это не работает во фрагменте кода. Я не знаю, что ты имеешь в виду

LeeLenalee
9 августа 2021 в 08:51
0

Я имею в виду, что вы сказали, что когда вы щелкнули по белому, точка была далеко от серого, когда я щелкнул фрагмент кода на белом, точка появилась там, где я щелкнул

FaresFilms
9 августа 2021 в 08:54
0

@Justin Я не могу просто так сделать, я хочу, чтобы у него была заданная ширина, плюс это делает окно игры намного шире, чем фактическое окно.

FaresFilms
9 августа 2021 в 09:37
0

@Mike'Pomax'Kamermans Я исправил проблему со смещением в вашем коде, но для этого мне потребовалось удалить width: 95%, так что теперь окно слишком большое (из-за верхней части файла js), и я не знаю, как это сделать. чтобы он подходил боком, не используя ширину.

FaresFilms
9 августа 2021 в 13:21
0

неважно, у меня все заработало. Просто изменил его размер с помощью canvas.width = innerWidth

Ответы (0)