制作圓角矩形 · 前端筆記

[TOC] # 代碼 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas制作圓角矩形（包括填充矩形的功能）</title> </head> <body> <canvas id="myCanvas" style="border:1px solid #d3d3d3;"> 您的瀏覽器不支持 HTML5 canvas 標簽。</canvas> <script> window.onload = function() { var myCanvas = document.getElementById("myCanvas"); //獲取canvas對象 if (myCanvas.getContext("2d")) { //判斷瀏覽器是否支持canvas標簽 //設置canvas的寬度和高度 myCanvas.width = 400; myCanvas.height = 200; var context = myCanvas.getContext("2d"); //獲取畫布context的上下文環境 //繪制一個圓角矩形 strokeRoundRect(context, 10, 10, 100, 50, 10); //繪制并填充一個圓角矩形 fillRoundRect(context, 200, 10, 100, 50, 10, 'rgba(0,0,0,0.7)'); } else { alert("您的瀏覽器不支持canvas，請換個瀏覽器試試"); } }; /**該方法用來繪制一個有填充色的圓角矩形 *@param cxt:canvas的上下文環境 *@param x:左上角x軸坐標 *@param y:左上角y軸坐標 *@param width:矩形的寬度 *@param height:矩形的高度 *@param radius:圓的半徑 *@param fillColor:填充顏色 **/ function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) { //圓的直徑必然要小于矩形的寬高 if (2 * radius > width || 2 * radius > height) { return false; } cxt.save(); cxt.translate(x, y); //繪制圓角矩形的各個邊 drawRoundRectPath(cxt, width, height, radius); cxt.fillStyle = fillColor || "#000"; //若是給定了值就用給定的值否則給予默認值 cxt.fill(); cxt.restore(); } /**該方法用來繪制圓角矩形 *@param cxt:canvas的上下文環境 *@param x:左上角x軸坐標 *@param y:左上角y軸坐標 *@param width:矩形的寬度 *@param height:矩形的高度 *@param radius:圓的半徑 *@param lineWidth:線條粗細 *@param strokeColor:線條顏色 **/ function strokeRoundRect(cxt, x, y, width, height, radius, /*optional*/ lineWidth, /*optional*/ strokeColor) { //圓的直徑必然要小于矩形的寬高 if (2 * radius > width || 2 * radius > height) { return false; } cxt.save(); cxt.translate(x, y); //繪制圓角矩形的各個邊 drawRoundRectPath(cxt, width, height, radius); cxt.lineWidth = lineWidth || 2; //若是給定了值就用給定的值否則給予默認值2 cxt.strokeStyle = strokeColor || "#000"; cxt.stroke(); cxt.restore(); } function drawRoundRectPath(cxt, width, height, radius) { cxt.beginPath(0); //從右下角順時針繪制，弧度從0到1/2PI cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2); //矩形下邊線 cxt.lineTo(radius, height); //左下角圓弧，弧度從1/2PI到PI cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); //矩形左邊線 cxt.lineTo(0, radius); //左上角圓弧，弧度從PI到3/2PI cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2); //上邊線 cxt.lineTo(width - radius, 0); //右上角圓弧 cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2); //右邊線 cxt.lineTo(width, height - radius); cxt.closePath(); } </script> </body> </html> ~~~ # 參考資料 [canvas制作圓角矩形（包括填充矩形的功能）]([https://blog.csdn.net/xutongbao/article/details/82786929](https://blog.csdn.net/xutongbao/article/details/82786929))