canvas學習總結六：繪製矩形

在第三章中（canvas學習總結三：繪製路徑-線段）我們提高Canvas繪圖環境中有些屬於立即繪製圖形方法，有些繪圖方法是基於路徑的。

立即繪製圖形方法僅有兩個strokeRect(),fillRect(),兩個方法都是用來繪製矩形的。

Canvas的API提供瞭如下三個方法，分別用於矩形的清除，描邊與填充

• clearRect(x, y, w, h): 清除指定區域，使其為全透明
• strokeRect(x, y, w, h): 繪製一個描邊的矩形
• fillRect(x, y, w, h): 繪製一個填充的矩形

我們先來看看基於路徑的繪製矩形的方法

moveTo(), lineTo()

function drawRect(){
　　// 描邊矩形
　　ctx.beginPath();
　　ctx.moveTo(20, 20);
　　ctx.lineTo(200, 20);
　　ctx.lineTo(200, 200);
　　ctx.lineTo(200, 200);
　　ctx.lineTo(20, 200);
　　ctx.lineTo(20, 20);
　　ctx.stroke();

　　//填充矩形
　　ctx.beginPath();
　　ctx.moveTo(220, 20);
　　ctx.lineTo(400, 20);
　　ctx.lineTo(400, 200);
　　ctx.lineTo(220, 200);
　　ctx.lineTo(220, 200);
　　ctx.lineTo(220, 20);
　　ctx.fill();
}

rect()繪製矩形
rect(x, y, w, h):繪製一個封閉的矩形路徑
參數x, y 分別為矩形左上角的坐標，w, h 分別為矩形的寬高

function drawRect(){
　　ctx.beginPath();
　　ctx.rect(20, 20, 180, 180);
　　ctx.stroke();
　　
　　ctx.beginPath();
　　ctx.rect(220, 20, 180, 180);
　　ctx.fill();
}

立即繪圖函數

strokeRect(x, y, w, h):  繪製一個描邊的矩形

參數x, y 分別為矩形左上角的坐標，w, h 分別為矩形的寬高

function drawRect(){
　　ctx.strokeRect(20, 20, 180, 180);
}

fillRect(x, y, w, h): 繪製一個填充的矩形

參數x, y 分別為矩形左上角的坐標，w, h 分別為矩形的寬高

function drawRect(){
    ctx.fillRect(20, 20, 180, 180);
}

clearRect(x, y, w, h): 清除指定區域內的所有像素
參數x, y 分別為矩形左上角的坐標，w, h 分別為矩形的寬高

清除畫布的方法

ctx.clearRect(0, 0, canvas.width, canvas.height);

繪製圓角矩形

在第五章中（canvas學習總結五：線段的端點與連接點）我們介紹了lineJoin屬性 用來設置線的連接點的樣式，因此我們可以繪製圓角矩形

function drawRect(){
　　ctx.lineWidth = 13;
　　ctx.lineJoin = 'round';
　　ctx.strokeRect(20, 20, 180, 180);
}

當然我們還可以使用lineJoin的其他屬性值繪製不同方式的矩形。我們可以自己測試一下。

總結：

路徑繪製矩形

moveTo(), lineTo()繪製路徑,stroke()與fill()進行描邊與填充

rect(x, y, w, h)順時針繪製路徑,stroke()與fill()進行描邊與填充

立即繪製矩形

strokeRect(x, y, w, h): 繪製一個描邊的矩形

fillRect(x, y, w, h): 繪製一個填充的矩形