// 封裝一個函數,將用來繪製圓角矩形
function drawRoundRect(cxt, x, y, width, height, radius){
cxt.beginPath();
cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
cxt.lineTo(width - radius + x, y);
cxt.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
cxt.lineTo(width + x, height + y - radius);
cxt.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
cxt.lineTo(radius + x, height +y);
cxt.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
cxt.closePath();
}
// 獲得參數
var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,200,200); // 畫了一個矩形框
drawRoundRect(context, 200, 200, 150, 30, 4);
// 這裏的參數表示:context必不用說,200,200, 表示的是矩形的左上角距離canvas的左頂點
//的距離,150,30 表示的是所 要繪製的矩形的寬高,4表示的是radius
context.strokeStyle = "#0078AA";
context.stroke();
特此記錄