使用HTML5在画布的中心设置两个画布正方形

Question

我有两个要放置在画布上的框要居中。 您可以在JS小提琴上查看此内容： http : //jsfiddle.net/FVU47/5/

我的画布具有1000高度和1000宽度，如下所示：

<canvas id="myCanvas" width="1000" height="1000" style="border:3px solid #385D8A; outline:1px solid #7592B5; margin-left: 0px; margin-top: 0px; background-color: #B9CDE5"></canvas> 

然后，我尝试使用以下代码将两个框居中，这会将box1或box2放在画布的中心，具体取决于我单击的是“转到框1”还是“转到框2”（请参见JSFiddle结果象限的底部：

$(document).ready(function(){
  $("#box1click").click(function(){
    if (rect1.x <= 500) {
      positionWidthSet = Math.abs(rect1.x - canvas.width/2) + rect1.x;
    }
    else{
      positionWidthSet = Math.abs(Math.abs(rect1.x - canvas.width/2) + rect1.x)
    }
    if (rect1.y >= 500) {
      positionHeightSet = Math.abs(rect1.y -canvas.height/2);
    }
    else{
      positionHeightSet = Math.abs(Math.abs(rect1.y - canvas.height/2) + rect1.y);
    }

    positionCanvasContext(positionWidthSet,positionHeightSet);
  });
});


$(document).ready(function(){
  $("#box2click").click(function(){
     if (rect2.x <= 500) {
      positionWidthSet = Math.abs(rect2.x - canvas.width/2) + rect2.x;
    }
    else{
      positionWidthSet = Math.abs(Math.abs(rect2.x - canvas.width/2) + rect2.x)
    }
    if (rect2.y >= 500) {
      positionHeightSet = Math.abs(rect2.y -canvas.height/2);
    }
    else{
      positionHeightSet = Math.abs(Math.abs(rect2.y - canvas.height/2) + rect2.y);
    }

    positionCanvasContext(positionWidthSet,positionHeightSet);
  });
});

当前，单击“转到框1”或“转到框2”不会使画布围绕框1或框2居中，即使在控制台中尝试使用我的公式似乎表明不是这样。

Answer 1

这是一种方法： http : //jsfiddle.net/m1erickson/GpMsk/

将所有矩形放置在数组中：

var rects=[];

rects.push({
  x: 103,
  y: 262,
  w: 200,
  h: 100,
  fillStyle: 'red',
  hovered: false
});

rects.push({
  x: 484,
  y: 170,
  w: 200,
  h: 100,
  fillStyle: 'blue',
  hovered: false
});

创建一个draw（）函数来绘制rects []数组中的所有rect

用指定的x / y偏移其原始x / y绘制所有矩形：

function draw(offsetX,offsetY){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for(var i=0;i<rects.length;i++){
        var r=rects[i];
        ctx.fillStyle=r.fillStyle;
        ctx.fillRect(r.x+offsetX,r.y+offsetY,r.w,r.h);
    }
}

单击按钮时，计算将指定矩形拉到画布中心所需的偏移量

然后使用计算的偏移量重画所有矩形。

var centerX=canvas.width/2;
var centerY=canvas.height/2;

function centerThisRect(rectsIndex){
    var r=rects[rectsIndex];
    var offsetX=centerX-r.x-r.w/2;
    var offsetY=centerY-r.y-r.h/2;
    draw(offsetX,offsetY);
}