面试题：TypeScript实现基础Canvas绘图类型定义

Question

使用TypeScript定义一个简单的Canvas绘图场景，包括绘制矩形。请定义相关的类型接口，比如用于描述矩形位置、尺寸的接口，以及一个绘图函数，该函数接受这些类型作为参数并在Canvas上绘制矩形。

Answer 1

// 定义描述矩形位置和尺寸的接口
interface Rectangle {
    x: number;
    y: number;
    width: number;
    height: number;
}

// 绘图函数，接受Rectangle接口类型参数并在Canvas上绘制矩形
function drawRectangle(canvas: HTMLCanvasElement, rect: Rectangle) {
    const ctx = canvas.getContext('2d');
    if (ctx) {
        ctx.beginPath();
        ctx.rect(rect.x, rect.y, rect.width, rect.height);
        ctx.fillStyle = 'black';
        ctx.fill();
        ctx.closePath();
    }
}

假设在HTML中有一个canvas元素：

<canvas id="myCanvas" width="400" height="400"></canvas>

在JavaScript中调用：

const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const rectangle: Rectangle = {
    x: 50,
    y: 50,
    width: 100,
    height: 100
};
drawRectangle(canvas, rectangle);