почему я не могу нарисовать квадрат на холсте? - PullRequest
Новая
       4

почему я не могу нарисовать квадрат на холсте?

0 голосов
/ 20 января 2019

Эй, парень, я делаю игру со змеями в JS, и сейчас все, что я пытаюсь сделать, это нарисовать змею в центре холста. Я установил размеры холста в соответствии с размерами доски, чтобы все масштабировалось правильно, но ничего не показывалось. Любая помощь будет оценена :) 1001 * 

//declare global variables
const canvas = document.querySelector('#canvas');

//set canvas context
const ctx = canvas.getContext('2d');

//set canvas dimensions to board dimensions
canvas.width = 768;
canvas.height = 512;

//put canvas dimensions into variables
const cvsW = canvas.width;
const cvsH = canvas.height;

//create snake unit
const unit = 16;

//create snake and set starting position
let snake = [{
	x : cvsW/2,
	y : cvsH/2
}]


ctx.fillStyle = 'limegreen';
ctx.fillRect(snake.x, snake.y, unit, unit);
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Snake</title>
	<style>
		body {
			background-color: #333;
		}

		#canvas {
			background-color: #4d4d4d;
			display: block;
			margin: auto;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="768" height="512"></canvas>
	<script src="script.js"></script>
</body>
</html>

1 Ответ

0 голосов
/ 20 января 2019

Это происходит потому, что ваш snake является массивом объектов. Вам нужно либо превратить это в один объект, чтобы ваш код работал, либо использовать индекс для выбора объекта внутри. 

ctx.fillRect(snake[0].x-unit/2, snake[0].y-unit/2, unit, unit);

Также обратите внимание, что для правильного центрирования вашей змеи вам необходимо вычесть unit/2 из координат x и y.

Вы также можете удалить настройку размеров холста в вашем коде, так как она устанавливается, когда вы определяете атрибуты height и width для вашего элемента canvas.

См. Рабочий пример ниже: 

//declare global variables
const canvas = document.querySelector('#canvas');

//set canvas context
const ctx = canvas.getContext('2d');

//put canvas dimensions into variables
const cvsW = canvas.width;
const cvsH = canvas.height;

//create snake unit
const unit = 16;

//create snake and set starting position
let snake = [{
  x: cvsW / 2,
  y: cvsH / 2
}];


ctx.fillStyle = 'lime';
ctx.fillRect(snake[0].x - unit / 2, snake[0].y - unit / 2, unit, unit);
body {
  background-color: #333;
}

#canvas {
  background-color: #4d4d4d;
  display: block;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
<canvas id="canvas" width="768" height="512"></canvas>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...