canvas 画一个四条边宽度不一样的矩形

以下是一个使用canvas绘制四条边宽度不一样的矩形的示例代码：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

const rectX = 50; // 矩形左上角x坐标
const rectY = 50; // 矩形左上角y坐标
const rectWidth = 200; // 矩形宽度
const rectHeight = 100; // 矩形高度
const topBorderWidth = 5; // 顶部边框宽度
const rightBorderWidth = 10; // 右侧边框宽度
const bottomBorderWidth = 15; // 底部边框宽度
const leftBorderWidth = 20; // 左侧边框宽度

// 绘制矩形边框
ctx.lineWidth = topBorderWidth;
ctx.strokeRect(rectX, rectY, rectWidth, rectHeight);

ctx.lineWidth = rightBorderWidth;
ctx.beginPath();
ctx.moveTo(rectX + rectWidth, rectY);
ctx.lineTo(rectX + rectWidth, rectY + rectHeight);
ctx.stroke();

ctx.lineWidth = bottomBorderWidth;
ctx.beginPath();
ctx.moveTo(rectX + rectWidth, rectY + rectHeight);
ctx.lineTo(rectX, rectY + rectHeight);
ctx.stroke();

ctx.lineWidth = leftBorderWidth;
ctx.beginPath();
ctx.moveTo(rectX, rectY + rectHeight);
ctx.lineTo(rectX, rectY);
ctx.stroke();

你可以将以上代码复制到一个HTML文件中，并在页面中添加一个id为"myCanvas"的canvas元素，然后运行代码即可看到绘制的矩形。你可以根据需要调整矩形的位置、大小和边框宽度