How do I center a rectangle on a canvas

问题

I have the vaguest idea why this block of code won't center the rectangle on the canvas. It even ends up being drawn out of bounds.

Please help?

 document.addEventListener('DOMContentLoaded', drawIllustrations);                                                                   

 function drawIllustrations(e) {                                                                                                     

   var fixedBody = document.getElementById('FixedBody'),                                                                             
       contextOne = fixedBody.getContext('2d'),                                                                                      
       centerX = fixedBody.offsetWidth * 0.5;                                                                                        

   contextOne.fillStyle = "#BFFF00";                                                                                                 
   contextOne.fillRect(centerX - 100,0,200,fixedBody.offsetHeight);                                                                  

 }

回答1:

To center the rectangle on the canvas, you'll need to know the width of the canvas. Then it's pretty easy. The x of your rect would be canvasWidth/2 - rectangleWidth/2

So in your case:

contextOne.fillRect(fixedBody.width/2 - (200/2), 0, 200, fixedBody.height);

回答2:

You just gotta calculate the mid-point of the canvas and then just draw your rectangle based on those coordinates:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var recWidth = 200
var recHeight = 200

var xPos = (document.getElementById("myCanvas").width/2) - (recWidth/2);

var yPos = (document.getElementById("myCanvas").height/2) - (recHeight/2);

ctx.fillRect(xPos,yPos,recWidth,recHeight);

</script> 

</body>
</html>

回答3:

It seems to work just fine:

function drawIllustrations() {                                                                              const fixedBody = document.getElementById('FixedBody');                                                  const contextOne = fixedBody.getContext('2d');                                                            const centerX = fixedBody.offsetWidth * 0.5;                                                                                        
   contextOne.fillStyle = "#BFFF00";                        
   contextOne.fillRect(centerX - 100, 0, 200, fixedBody.offsetHeight);
}

drawIllustrations();

canvas {
  border: 1px solid #000;
}

<canvas id="FixedBody" width="300" height="200"/>

The only things I can see that may be a bit odd:

The height is from the top to the bottom of the canvas. This may look like it's going off. If you want it only a portion, you should adjust it.
You are using a fixed width of 200 for the rectangle. If the canvas is less than that, it will go off (though still be centered).

If you wanted the rectangle to always be within the canvas, you could set the width and height to be relative to the canvas (like say, 75% of it's size, for example):

function drawIllustrations() {                                                                              const fixedBody = document.getElementById('FixedBody');                                                  const contextOne = fixedBody.getContext('2d');                                                            const centerX = fixedBody.width * .5;
   const centerY = fixedBody.height * .5;

   contextOne.fillStyle = "#BFFF00";                        
   contextOne.fillRect(centerX - (fixedBody.width * .75 / 2), centerY - (fixedBody.height * .75 / 2), fixedBody.width * .75, fixedBody.height * .75);
}

drawIllustrations();

canvas {
  border: 1px solid #000;
}

<canvas id="FixedBody" width="300" height="200"/>

The only other thing, is since in your example you used offsetWidth and offsetHeight instead of just width and height, if the canvas had any padding or borders, it would be offset by that much. In general, when working with the canvas, stick with width and height as they only take into account the size of the actual canvas, not it's related border and padding.

Here is an example of what lots of padding and just two sides will do if using offsetWidth and offsetHeight (everything else is the same as the above example:

function drawIllustrations() {                                                                              const fixedBody = document.getElementById('FixedBody');                                                  const contextOne = fixedBody.getContext('2d');                                                            const centerX = fixedBody.offsetWidth * .5;
   const centerY = fixedBody.offsetHeight * .5;

   contextOne.fillStyle = "#BFFF00";                        
   contextOne.fillRect(centerX - (fixedBody.offsetWidth * .75 / 2), centerY - (fixedBody.offsetHeight * .75 / 2), fixedBody.width * .75, fixedBody.offsetHeight * .75);
}

drawIllustrations();

canvas {
  border: 1px solid #000;
  padding: 200px 200px 0 0;
}

<canvas id="FixedBody" width="300" height="200"/>

来源：https://stackoverflow.com/questions/48413594/how-do-i-center-a-rectangle-on-a-canvas

标签

javascript

canvas