欢迎关注我的公众号：前端侦探经常用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在Chrome99中悄悄引入了一个新方法：roundRect()，花一分钟时间了解1.RoundRect语法roundRect，顾名思义，就是一个圆角矩形。用法和rect一样，只是参数上多了一个圆角半径。这里x,y,w,h就不介绍了，重点放在这个圆角半径上。圆角半径具有以下值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中的圆角规则是一致的，看一下就可以看懂下面的具体效果2.RoundRect案例及细节先看一个值，可以满足大多数情况constcanvas=document.getElementById('canvas');constctx=canvas.getContext('2d');ctx.strokeStyle='red';ctx.beginPath();ctx.roundRect(20,20,150,100,10);ctx.stroke();效果如下当然这个值也可以省略，这样就没有边角变圆了，相当于rectctx.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一模一样，变成了跑道形状。效果如下。另外需要注意的是，这个圆的角度不能为负，否则会直接报错。完整代码可以在以下任一链接中查看canvasroundRect(codepen.io)canvasroundRect(runjs.work)3.兼容性和polyfill这个方法比较新，也就是今年年初推出的，兼容性不是特别好。如下，除了firefox，其他主流浏览器都已经兼容了当然不用担心，这个也有polyfill，如下https://cdn.jsdelivr.net/gh/K...其实实现就是还是比较复杂的。需要考虑的情况很多，各种临界场景，参数个数。这也是为什么推荐使用原生API的原因，语法太容错了！4.你还记得吗？下次画圆角矩形的时候可以考虑这个方法。至少你有一个替代方案。兼容性是其次。最后回顾一下，圆角可以是数组，规则参照CSS圆角。规则会做。最后，如果觉得对你有好处和帮助，欢迎点赞、收藏、转发???欢迎关注我的公众号：前端大侦探
