javascript - 将矩形对象放在 Canvas 的边框上

Question

我正在制作一个关于弹跳球的程序，当它们颜色相同并相互接触时，它们会产生一个新球。现在我想在边界的一部分上添加一个矩形对象，如果被球触及，就会破坏球对象。我在 Canvas 左右两侧的边界上设置矩形时遇到问题。这是我在 Canvas 边框上绘制矩形的代码。

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

}

我觉得这是我所缺少的非常简单的东西。或者是否有更好的方法来处理这个概念？

Answer 1

您需要使用正确的坐标 — 顶 Angular 就是 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>