首先是使用arc圓所對應的參數爲（默認爲順時針）：
這裏話矩形的話，對應的圓心頂點座標爲：
程序運行截圖如下：
源碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
當前瀏覽器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
drawRoundRect(context, 100, 100, 600, 500, 50);
}
function drawRoundRect(cxt, x, y, width, height, radius){
cxt.save();
cxt.translate(x, y);
pathRoundRect(cxt, width, height, radius);
cxt.strokeStyle = "black";
cxt.stroke();
cxt.restore();
}
function pathRoundRect(cxt, width, height, radius){
cxt.beginPath();
cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
cxt.lineTo(radius, height);
cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
cxt.lineTo(0, radius);
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.closePath();
}
</script>
</body>
</html>
這裏先使用translate把座標原點移動到指定的位置。
cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
畫最右下角的弧。
cxt.lineTo(radius, height);
然後從最右下角的弧畫到最左下角。
cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
畫左下角的圓弧。
cxt.lineTo(0, radius);
然後從最右下角的弧畫到最左下角。
cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
畫左下角的圓弧。
cxt.lineTo(0, radius);
從最左下角的圓弧畫到最左上角。
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.closePath();
封口，也就是畫最右邊的那條邊。
下面是畫一個2048的棋盤
程序運行截圖如下；
源碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
當前瀏覽器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
fillRoundRect(context, 150, 150, 500, 500, 10, "#bbada0");
for(let i = 0; i < 4; i++){
for(let j = 0; j < 4; j++){
fillRoundRect(context, 170 + i * 120, 170 + j * 120, 100, 100, 6, "#ccc0b3");
}
}
}
function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor){
if(2 * radius > width || 2 * radius > height){
return;
}
cxt.save();
cxt.translate(x, y);
pathRoundRect(cxt, width, height, radius);
cxt.fillStyle = fillColor || "black";
cxt.fill();
cxt.restore();
}
function strokeRoundRect(cxt, x, y, width, height, radius, /*optional*/lineWidth, /*optional*/strokeColor){
if(2 * radius > width || 2 * radius > height){
return;
}
cxt.save();
cxt.translate(x, y);
pathRoundRect(cxt, width, height, radius);
cxt.lineWidth = lineWidth || 1;
cxt.stroke();
cxt.restore();
}
function pathRoundRect(cxt, width, height, radius){
cxt.beginPath();
cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
cxt.lineTo(radius, height);
cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
cxt.lineTo(0, radius);
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.closePath();
}
</script>
</body>
</html>
這裏就是先畫了個大矩形，然後再大矩形下面畫下矩形。