<!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>
