Question

我正在编写一个有关弹跳球的程序，当它们具有相同的颜色并且彼此接触时，它们会生成一个新的球。现在，我想在边框的一部分上添加一个矩形对象，如果该矩形对象被球碰到，则会破坏该球对象。我在画布左右两侧的边框上设置矩形时遇到问题。这是我的代码，在其中我在画布的边框上绘制矩形。

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

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

Answer 2

不确定我是否全部理解（特别是为什么要使用负坐标），但是它应该可以完成工作：

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

将矩形对象放在画布的边框上

2 个答案: