如何使fillRect方法绘制的矩形相对于Canvas元素居中

嘿，作为JavaScript新手遇到这种布局问题太正常啦，我来一步步帮你搞定这个居中需求！

核心原理： #

要让矩形相对于Canvas完美居中，关键是算出矩形左上角的正确坐标：

• X坐标 = (Canvas的宽度 - 矩形的宽度) / 2
• Y坐标 = (Canvas的高度 - 矩形的高度) / 2

这个公式能保证矩形的中心和Canvas的中心完全重合～

修改后的完整代码： #

我先帮你修正了HTML里的小语法问题，再调整了JavaScript的坐标计算逻辑，直接用下面的代码就能实现效果：

CSS（保持原有的即可，没问题）：

canvas { 
  padding: 0; 
  margin: auto; 
  display: block; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  background-color: aqua; 
}

HTML & JavaScript：

<html>
  <link rel="stylesheet" href="canvas.css">
  <body>
    <!-- 修正了canvas属性间的逗号（HTML属性不用逗号分隔），同时把id改成更规范的名称 -->
    <canvas width="800" height="800" id="canvas1"></canvas>
    <script>
      let canvas = document.querySelector('canvas');
      let context = canvas.getContext('2d');
      
      // 把矩形的宽高定义成变量，方便后续修改
      const rectWidth = 400;
      const rectHeight = 400;
      
      // 计算居中的坐标
      const rectX = (canvas.width - rectWidth) / 2;
      const rectY = (canvas.height - rectHeight) / 2;
      
      context.fillStyle = "Blue";
      // 使用计算好的坐标绘制矩形
      context.fillRect(rectX, rectY, rectWidth, rectHeight);
    </script>
  </body>
</html>

关键修改点解释： #

1. 修正HTML语法：原来canvas标签里的width="800", height="800"是错误的，HTML属性之间用空格分隔就好，所以改成了width="800" height="800"；同时把id从1改成canvas1，更符合代码规范。
2. 提取矩形尺寸为变量：把矩形的宽高单独定义，后续想调整大小的时候直接改变量值就行，不用到处找代码。
3. 计算居中坐标：用Canvas的整体尺寸减去矩形尺寸，再除以2，得到的就是矩形左上角需要放置的位置，这样矩形就会稳稳地居中在Canvas里了。

这样修改后，你的蓝色矩形就会完美坐在水绿色Canvas的中心啦！

内容的提问来源于stack exchange，提问作者J.A.C.K.