Canvas 绘制直角梯形

引言

在Web开发领域中，HTML5的 <canvas> 元素为我们提供了一个强大的绘图平台。通过 JavaScript，开发者可以在 <canvas> 上绘制出各种各样的图形。直角梯形作为一种特殊的四边形，不仅在数学上有其独特的性质，在图形用户界面设计中也经常被用作各种元素的形状，比如按钮、卡片等。本文将深入探讨如何使用 <canvas> API 来绘制直角梯形，并提供丰富的代码示例和实际应用场景。

基本概念

直角梯形是一种有一组对边平行的四边形，并且其中至少有一个直角。在 <canvas> 中，我们可以通过 beginPath(), moveTo(), lineTo(), 和 closePath() 方法来定义梯形的边界，之后使用 stroke() 或 fill() 方法来绘制出这个形状。

示例一：基本直角梯形绘制

下面的示例展示了如何绘制一个简单的直角梯形。我们将定义梯形的顶点坐标，并使用 <canvas> 的基本绘图方法来完成绘制。

// 获取canvas元素并设置上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置canvas尺寸
canvas.width = 500;
canvas.height = 500;

// 定义直角梯形的属性
const x1 = 100; // 左侧底部点的x坐标
const y1 = 300; // 左侧底部点的y坐标
const x2 = 300; // 右侧底部点的x坐标
const y2 = 300; // 右侧底部点的y坐标
const x3 = 300; // 右侧顶部点的x坐标
const y3 = 200; // 右侧顶部点的y坐标
const x4 = 150; // 左侧顶部点的x坐标
const y4 = 200; // 左侧顶部点的y坐标

// 开始绘制路径
ctx.beginPath();
ctx.moveTo(x1, y1); // 移动到左下角
ctx.lineTo(x2, y2); // 画线到右下角
ctx.lineTo(x3, y3); // 画线到右上角
ctx.lineTo(x4, y4); // 画线到左上角
ctx.closePath(); // 关闭路径

// 设置线条颜色
ctx.strokeStyle = 'blue';
// 设置线条宽度
ctx.lineWidth = 3;

// 绘制边框
ctx.stroke();

示例二：填充直角梯形

接下来，我们将为直角梯形添加填充色，并设置透明度，以增加视觉效果。

// 设置填充颜色
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
// 重新绘制直角梯形并填充
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.