圓角矩形 · 前端技術總結

圖示分析（r是半徑） ![](https://box.kancloud.cn/178f077e36ad03730a5e39ad656f22f2_330x262.jpg) 一目了然，有過數學基礎的應該很容易就能明白。。沒有也沒關系，大不了直接復制拿走，，，嘿嘿嘿~~~ 下面來封裝一下函數 ![](https://box.kancloud.cn/ee94cbce20aaf44a4dfe7d96099d61ff_113x146.jpg) ~~~ // 圓角矩形 function drawRoundRect(x, y, width, height, radius){ ctx.beginPath(); ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); ctx.lineTo(width - radius + x, y); ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2); ctx.lineTo(width + x, height + y - radius); ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2); ctx.lineTo(radius + x, height +y); ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); ctx.closePath(); } drawRoundRect(100, 300, 80, 40, 10); ~~~ 接著先看著整體代碼的填充矩形效果 ![](https://box.kancloud.cn/56aab3f45a7d9ce9f0bb7d995420719d_137x74.jpg) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圓角矩形</title> <style> *{margin: 0;padding: 0;} </style> </head> <body> <canvas id="canvas" data-percent="10"></canvas> <script> var $ = document.querySelector.bind(document); var canvas = $('#canvas'), canvasWth = 500; canvasHgt = 500; canvas.width = canvasWth; canvas.height = canvasHgt; canvas.style.backgroundColor = '#999'; var ctx = canvas.getContext('2d'); // 圓角矩形 function drawRoundRect(x, y, width, height, radius){ ctx.beginPath(); ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); ctx.lineTo(width - radius + x, y); ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2); ctx.lineTo(width + x, height + y - radius); ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2); ctx.lineTo(radius + x, height +y); ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); ctx.closePath(); } drawRoundRect(100, 300, 80, 40, 10); ctx.strokeStyle = "#0078AA"; ctx.stroke(); ctx.fillStyle = "#0078AA"; ctx.fill(); </script> </body> </html> ~~~ 再來看下描邊矩形效果（稍微改變下radius結果就不一樣了） ![](https://box.kancloud.cn/bb833c2fe2a85ae070324e5fba412cee_109x60.jpg) ~~~ // 圓角矩形 function drawRoundRect(x, y, width, height, radius){ ctx.beginPath(); ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2); ctx.lineTo(width - radius + x, y); ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2); ctx.lineTo(width + x, height + y - radius); ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2); ctx.lineTo(radius + x, height +y); ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI); ctx.closePath(); } drawRoundRect(100, 300, 80, 40, 20); ctx.strokeStyle = "#FFCD44"; ctx.stroke(); ~~~ 是不是很驚喜！可惜到此結束了。。客觀憋屈道： ![](https://box.kancloud.cn/16b344abd78310633c51bf01b0f909a7_151x167.jpg) 那我就吟詩一首聊表歉意吧 ~~~ 送杜少府之任蜀州唐王勃城闕輔三秦，風煙望五津。與君離別意，同是宦游人。海內存知己，天涯若比鄰。無為在歧路，兒女共沾巾。 ~~~