共计 1752 个字符，预计需要花费 5 分钟才能阅读完成。
欢送关注我的公众号：前端侦探
很多时候，在应用 Canvas 绘制圆角矩形都是一件比拟麻烦的事，因为之前并没有间接的办法，只能通过直线和圆弧间接组合而成，上面是一个惯例绘制形式
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();这里
x、y、w、h、r别离代表 x 坐标、 y 坐标、 宽度 、 高度 、 圆角。
这段代码应该是最精简的了，尽管不是特地简单，然而应该很少有人能间接手写，次要是不够语义化，比拟繁琐。
而圆角矩形又是一个十分常见的性能需要，为此，Canvas 在 Chrome 99 轻轻推出了一个新的办法：roundRect()，花一分钟理解一下
一、roundRect 语法
roundRect，顾名思义，就是 圆角矩形，和 rect 用法统一，只是参数上多了一个圆角radii
这里 x、y、w、h 就不介绍了，重点介绍一下这个圆角radii。
圆角 radii 有以下几种取值
all-corners，只有 1 一个值的时候，示意所有 4 个圆角[all-corners]，也能够是数组，当只有 1 一个值的时候，也示意 4 个圆角[top-left-and-bottom-right, top-right-and-bottom-left]，数组为 2 个值的时候，示意 左上、右下 圆角 和 右上、左下 圆角[top-left, top-right-and-bottom-left, bottom-right]，数组为 3 个值的时候，示意 左上 圆角、右上、左下 圆角 和 右下 圆角[top-left, top-right, bottom-right, bottom-left]，数组为 4 个值的时候，示意 左上 圆角、右上 圆角、右下 圆角和 左下 圆角
看似麻烦，其实就是和 CSS 中的圆角规定是统一的，略微看一眼就能明确
上面来看具体的成果
二、roundRect 案例及细节
首先来看一个值的，能够满足绝大部分状况
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.roundRect(20, 20, 150, 100, 10);
ctx.stroke();成果如下
当然这个值也是能够省略的，这样就没有圆角了，等同于rect
ctx.roundRect(20, 20, 150, 100);成果如下
再来看数组的状况，比方两个值的，就像这样
ctx.roundRect(20, 150, 150, 100, [10, 40]);成果如下
再来看 4 个值的状况
ctx.roundRect(200, 20, 150, 100, [0, 30, 50, 60]);成果如下
如果这个圆角十分大呢，超出了矩形的尺寸会怎么样呢？
ctx.roundRect(200, 20, 150, 100, 300);能够看到，这种状况也是完满适配，和 CSS 体现完全一致，变成了跑道形态，成果如下
还有须要留神的是，这个 圆角不能为正数，否则间接报错
残缺代码能够查看以下任意链接
- canvas roundRect (juejin.cn)
- canvas roundRect (codepen.io)
- canvas roundRect (runjs.work)
三、兼容性和 polyfill
这个办法还比拟新，也就是今年初才推出的，兼容性还不是特地好，如下
除了firefox，其余支流浏览器都曾经兼容。
当然也不必放心，这个也是有 polyfill 的，如下
https://cdn.jsdelivr.net/gh/K…
其实实现上还是比较复杂的，思考的状况十分多，各种临界场景，参数的数量。这也是为什么举荐用原生 API 的起因的，语法容错性太强了！
四、你记住了吗
下次绘制圆角矩形就能够思考这个办法了，至多心里有个备选计划，兼容性倒是其次，最初再来回顾一下
圆角能够是一个数组，规定就参考 CSS 圆角规定就行了。最初，如果感觉还不错，对你有帮忙的话，欢送 点赞、珍藏、转发❤❤❤
欢送关注我的公众号：前端侦探