JavaScript 中 Canvas 怎么绘制圆角矩形-js教程-PHP中文网

推荐优先使用原生 roundrect() 方法（chrome 99+、firefox 112+、safari 18.1+ 支持），语法类 css border-radius，支持单值、两值数组、四值数组圆角，并自动适配超限半径；不支持时降级为 arcto 手动实现，需注意 beginpath、closepath 及半径容错；微信小程序需结合 clip() 实现裁剪效果；开发中须注意路径重置、绘制顺序、高清屏适配及性能优化。

javascript 中 canvas 怎么绘制圆角矩形

Canvas 绘制圆角矩形主要有两种方式：一种是兼容老浏览器的手动路径构造（用 arcTo 或 quadraticCurveTo），另一种是现代浏览器支持的原生 roundRect() 方法。选哪种取决于你的目标环境和需求。

用 roundRect() 直接绘制（推荐，简洁安全）

Chrome 99+、Firefox 112+、Safari 18.1+ 已支持 ctx.roundRect()，语法和 CSS 的 border-radius 一致，非常直观：

单个数值：四个角统一圆角，ctx.roundRect(x, y, w, h, 12)
两个数值数组：[10, 20] 表示左上+右下为 10px，右上+左下为 20px
四个数值数组：[5, 10, 15, 20] 分别对应左上、右上、右下、左下
半径超限时自动适配（如设 300px 圆角在 150×100 矩形上，会变成跑道形）

使用前建议加个存在性判断：

if (typeof ctx.roundRect === 'function') {
  ctx.roundRect(50, 50, 200, 120, 16);
  ctx.fill();
} else {
  // fallback 到手动实现
}

手动实现 arcTo 版（兼容 IE/旧版微信小程序等）

核心逻辑是用 moveTo + 四次 arcTo 连接四条边，注意顺序和参数含义：

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

arcTo(x1, y1, x2, y2, r) 是以 (x1,y1) 和 (x2,y2) 为切点、半径为 r 的圆弧
必须先 beginPath()，最后 closePath()
半径不能超过宽高一半，否则图形异常，需做容错：r = Math.min(r, w/2, h/2)

封装示例：

function drawRoundedRect(ctx, x, y, w, h, r) {
  r = Math.min(r, w / 2, h / 2);
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.arcTo(x + w, y, x + w, y + h, r);
  ctx.arcTo(x + w, y + h, x, y + h, r);
  ctx.arcTo(x, y + h, x, y, r);
  ctx.arcTo(x, y, x + w, y, r);
  ctx.closePath();
}