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

Set two canvas squares to the center of a canvas with HTML5

本文关键字：正方形 两个 设置 HTML5      更新时间：2023-09-26

我在画布上放置了两个框，我想把它们居中。你可以在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);
  });
});

目前，点击"Go to Box 1"或"Go to Box 2"都不会使画布围绕Box 1或Box 2居中，尽管在控制台中试验我的公式似乎表明情况并非如此。

有一种方法:http://jsfiddle.net/m1erickson/GpMsk/

把你所有的rects放在一个数组中: 

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[]数组中的所有矩形

绘制具有指定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);
}
相关文章：