如何绘制虚线描边矩形？是否存在简便实现方法？

不用手动绘制一系列短线，Canvas API 提供了专门的方法来实现虚线描边：

• 使用 ctx.setLineDash() 方法定义虚线的线段和间隙模式，参数是一个数组，数组元素依次代表线段长度、间隙长度（模式会循环重复）
• 设置完成后，正常调用 strokeRect() 绘制矩形即可

示例代码：

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

// 设置虚线模式：[线段长度, 间隙长度]
ctx.setLineDash([5, 3]);

// 可选：设置描边颜色、宽度等样式
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;

// 绘制虚线描边矩形
ctx.strokeRect(50, 50, 200, 150);

如果需要恢复实线描边，调用 ctx.setLineDash([]) 即可清空虚线模式。

这个方法不仅适用于矩形，所有需要描边的路径（比如线条、圆形、自定义路径）都可以用该方式设置虚线样式。

内容的提问来源于stack exchange，提问作者Pierpaolo