如何在画布的中心绘制正方形 - Javascript

在JavaScript中绘制形状通常需要使用 Canvas 元素。绘制一个正方形需要用到其中的一些内置方法。

步骤

下面是如何在画布的中心绘制正方形的简易步骤：

1. 获取画布对象
2. 计算正方形中心点
3. 绘制正方形

代码实现

let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');

// 计算正方形中心点
let centerX = canvas.width / 2;
let centerY = canvas.height / 2;

// 定义正方形边长
let squareSize = 100;

// 计算正方形左上角坐标
let x = centerX - (squareSize / 2);
let y = centerY - (squareSize / 2);

// 绘制正方形
context.fillRect(x, y, squareSize, squareSize);

代码解释

1. 通过 document.getElementById('myCanvas') 获取画布元素，并通过 getContext('2d') 方法获取画布对象。
2. 通过获取画布的 width 和 height 属性计算正方形的中心点。
3. 定义正方形的边长，并通过中心点坐标计算左上角坐标。
4. 使用对象的 fillRect() 方法绘制正方形。该方法的第一个参数为正方形左上角的 x 坐标，第二个参数为 y 坐标，第三个参数为正方形的宽度，第四个参数为正方形的高度。

总结

计算正方形边界和位置是绘制各种形状的基本要素。在Canvas中，我们使用 fillRect() 方法绘制正方形。这些技巧可以帮助完成更复杂的形状绘制，可以是纯JavaScript的，也可以是结合HTML的。