Помещение прямоугольного объекта на границе холста - PullRequest
Новая
       17

Помещение прямоугольного объекта на границе холста

0 голосов
/ 26 ноября 2018

Я делаю программу, которая касается прыгающих шаров, когда они одного цвета и касаются друг друга, они порождают новый шар.Теперь я хочу добавить прямоугольный объект на части границы, который при касании шарами уничтожит объект шара.У меня проблемы с установкой прямоугольников на границе левой и правой сторон холста.Вот мой код, где я рисую прямоугольники на границе холста. 

function Wall(x,y,width,height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;

  ctx.strokeStyle = 'red';
  ctx.lineWidth = '6';
  ctx.strokeRect(canvas.width/2, 0, canvas.width, 0);   //top, right half
  ctx.strokeRect(-canvas.width/2, canvas.height , canvas.width,0);  //bottom,left half
  ctx.strokeRect(-canvas.width/2, 0, canvas.height/2, 0); //Where i want to border left side, top half, DOESNT WORK

}

Мне кажется, что это что-то действительно простое, что я упускаю.Или есть лучший способ обойти это понятие?

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Вам нужно использовать правильные координаты - верхний угол просто 0, 0. 

function Wall() {
  let canvas = document.getElementById('myCanvas')
  ctx = canvas.getContext('2d')
  ctx.strokeStyle = 'red';
  ctx.lineWidth = '6';
  ctx.strokeRect(canvas.width/2, 0, canvas.width, 0);   //top, right half
  ctx.strokeRect(0, canvas.height , canvas.width/2,0);  //bottom,left half
  ctx.strokeRect(0, 0, 0, canvas.height/2);
  ctx.strokeRect(canvas.width, canvas.height/2, canvas.width, canvas.height);

}
Wall()
<canvas id="myCanvas"></canvas>
0 голосов
/ 26 ноября 2018

Не уверен, что я все понял (особенно, почему вы используете отрицательные координаты), но он должен делать свою работу: 

ctx.strokeRect(-canvas.width/2, 0, canvas.width, 0)
...