Node.js 通用 drawRectangle()函数

在 Node.js 中，我们可以通过使用 Canvas API 来绘制各种图形，包括矩形。为了让我们的代码更加清晰和易于维护，我们可以将绘制矩形的逻辑封装为一个通用函数 drawRectangle()。

函数定义

下面是 drawRectangle() 函数的定义：

function drawRectangle(ctx, x, y, width, height, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, width, height);
}

此函数接收 6 个参数：

• ctx：绘图上下文对象，可以通过创建 canvas 对象并调用其 getContext('2d') 方法来获得
• x：矩形左上角的 x 坐标
• y：矩形左上角的 y 坐标
• width：矩形的宽度
• height：矩形的高度
• color：矩形的填充颜色，可以是 CSS 颜色值或 CanvasGradient 或 CanvasPattern 对象

使用示例

下面是一个使用 drawRectangle() 函数绘制矩形的示例：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 300;
canvas.height = 200;

document.body.appendChild(canvas);

drawRectangle(ctx, 50, 50, 200, 100, '#ff0000');

此示例会在页面中创建一个 300x200 的 canvas 元素，然后调用 drawRectangle() 函数来在 canvas 中绘制一个红色的矩形。

总结

我们可以将常用的绘图逻辑封装为通用函数，这不但可以提高代码的可读性和可维护性，还可以减少代码的重复。上面的示例只是一种简单的封装方式，您可以根据实际需要进行修改。