通過前面教程的學習，我們可以在Canvas中輕易繪製路徑（線段）。這僅僅是Canvas中的一小部分，今天我們來看看在Canvas中怎麼繪製矩形。
繪製矩形的方法
在Canvas中提供了繪製矩形的API：
fillRect(x, y, width, height)：繪製一個填充的矩形strokeRect(x, y, width, height)：繪製一個矩形的邊框- clearRect(x, y, width, height)：清除指定矩形區域，讓清除部分完全透明
除此之外還可以通過Canvas中CanvasRenderingContext2D.rect()路徑方法創建矩形。這個方法需要配合CanvasRenderingContext2D.fill()繪製一個填充的矩形，CanvasRenderingContext2D.stroke()繪製一個填充的矩形。另外，還可以直接使用Canvas的繪製路徑的方法來繪製矩形。那我們來先看看怎麼使用路徑繪製矩形。
路徑繪製矩形
記得在學習繪製線段的時候，我們知道moveTo()和lineTo()可以繪製線段，如此一來，四條線就能拼出一個矩形，然後通過fill()和stroke()繪製出填充和邊框矩形。
function drawScreen () {
ctx.strokeStyle = '#00';
ctx.fillStyle = '#9f9'
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(230,30);
ctx.lineTo(230,200);
ctx.lineTo(30,200);
ctx.lineTo(30,30);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(300,30);
ctx.lineTo(500,30);
ctx.lineTo(500,200);
ctx.lineTo(300,200);
ctx.lineTo(300,30);
ctx.fill();
}
在Canvas中我們有一個closePath()的方法，在繪製矩形的時候，藉助這個方法，我們通過繪製三條線段，就能和起始點閉合，也就繪製出相應的矩形。基於上面的示例，在stroke()和fill()前面添加closePath()即可：
function drawScreen () {
ctx.strokeStyle = '#00';
ctx.fillStyle = '#9f9'
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(30,30);
ctx.lineTo(230,30);
ctx.lineTo(230,200);
ctx.lineTo(30,200);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(300,30);
ctx.lineTo(500,30);
ctx.lineTo(500,200);
ctx.lineTo(300,200);
ctx.closePath();
ctx.fill();
}
rect()繪製矩形
rect()也是Canvas中路徑的一個方法，前面說過了，也需要配合fill()和stroke()。rect() 具有四個參數：
rect(x, y, width, height)
其中x和y是矩形左上角的座標點，width是矩形的寬度，height是矩形的高度。接下來，看如何使用rect()繪製矩形：
function drawScreen () {
ctx.strokeStyle = '#00';
ctx.fillStyle = '#9f9'
ctx.lineWidth = 4;
ctx.beginPath();
ctx.rect(30,30,200,200);
ctx.stroke();
ctx.beginPath();
ctx.rect(300,30,200,200);
ctx.fill();
}
fillRect()繪製填充矩形
前面兩種方法是通過Canvas的路徑方法繪製填充和邊框矩形。那麼在Canvas中可以直接通過fillRect()繪製一個矩形：
fillRect(x,y,width,height)
和rect()一樣，x和y是矩形左上角的座標點，width是矩形寬度，height是矩形高度：
function drawScreen () {
ctx.fillStyle = '#9f9'
ctx.fillRect(30,30,200,200);
}
strokeRect()繪製邊框矩形
strokeRect()和fillRect()方法類似，只不過不同的是，strokeRect()繪製的是邊框矩形：
function drawScreen () {
ctx.lineWidth = 4;
ctx.strokeStyle = '#9f9'
ctx.strokeRect(30,30,200,200);
}
同時繪製有邊框和填充色的矩形
前面我們看到的都是單獨繪製邊框或填充的矩形。那麼將這兩種結合在一起，我們就可以很容易的繪製出同時帶有邊框和填充色的矩形：
function drawScreen () {
ctx.lineWidth = 4;
ctx.fillStyle = "orange";
ctx.strokeStyle = '#9f9'
// Methods #1
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(110,10);
ctx.lineTo(110,110);
ctx.lineTo(10,110);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(12,12);
ctx.lineTo(108,12);
ctx.lineTo(108,108);
ctx.lineTo(12,108);
ctx.closePath();
ctx.fill();
// Methods #2
ctx.beginPath();
ctx.rect(120,10,100,100);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.rect(122,12,96,96);
ctx.fill();
// Methods #3
ctx.strokeRect(240,10,100,100);
ctx.fillRect(242,12,96,96);
}
繪製折角或圓角矩形
在學習Canvas線型一節中，知道在Canvas中lineJoin可以改變線段連接端點的形狀。如果我們要繪製一個折角的矩形或者圓角的矩形時，就需要藉助lineJoin這個屬性。不過有一點需要特別注意，lineJoin只適合於線段連接觸端的樣式控制。也就是說，他只適合邊框矩形，如果沒有邊框的矩形是不生效的。話又說回來，如果需要一個填充的矩形需要有折角或圓角的效果時，就需要在填充矩形上加一個與填充色相同的邊框。
function drawScreen () {
ctx.lineWidth = 10;
ctx.strokeStyle = '#f99'
ctx.lineJoin = "bevel";
ctx.strokeRect(10,10,200,200);
ctx.lineJoin = "round";
ctx.strokeRect(250,10,200,200);
}
上面的示例基礎上調整一下：
function drawScreen () {
ctx.lineWidth = 10;
ctx.fillStyle = "#f36";
ctx.strokeStyle = '#f36';
ctx.lineJoin = "bevel";
ctx.strokeRect(10,10,200,200);
ctx.fillRect(15, 15,190,190);
ctx.lineJoin = "round";
ctx.strokeRect(250,10,200,200);
ctx.fillRect(255, 15,190,190);
}
改變矩形的樣式
不管是使用Canvas中的路徑方法還是自帶繪製矩形的API，都可以通過fillStyle和strokeStyle來給矩形設置樣式，比如填充顏色和邊框顏色。
清除矩形
在Canvas中有一個clearRect()可以指定矩形區域內（以 點 (x, y) 爲起點，範圍是(width, height) ）所有像素變成透明，並擦除之前繪製的所有內容的方法：
ctx.clearRect(x, y, width, height);
比如有時候需要清除畫布，可以這樣使用：
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
通過JS繪製矩形
前面我們學習的是通過Canvas的API來繪製矩形。很多時候，我們希望在Canvas畫布上直接使用鼠標就拖拉就能繪製出矩形。那接下來，用自己蹩腳的JavaScript來實現這功能。
第一步：監聽畫布上的鼠標事件
可以通過addEventListener()對畫布上的鼠標事件進行監聽，比如mousedown、mouseup和mousemove等：
myCanvas.addEventListener('mousedown', mouseDown, false);
myCanvas.addEventListener('mouseup', mouseUp, false);
myCanvas.addEventListener('mousemove', mouseMove, false);
在寫mouseDown、mouseUp和mouseMove函數的時候，先聲明兩變量：
var rect = {},
drag = false;
第二步：寫mouseDown()函數
mouseDown()函數是監聽鼠標在畫布上按下時需要做的事情：
function mouseDown(e) {
rect.startX = e.pageX - this.offsetLeft;
rect.startY = e.pageY - this.offsetTop;
drag = true;
}
當鼠標按下時，函數mouseDown()通過e.pageX和e.pageY找到e的位置，然後減去距離Canvas畫布左邊和頂部的距離。最後設置拖動drag爲true。
第三步：寫mouseUp()函數
function mouseUp(){
drag = false;
}
這個函數很簡單，當用戶釋放鼠標時，拖動drag設回false。表示鼠標不能拖動。
第四步：寫mouseMove()函數
function mouseMove(e) {
if (drag) {
rect.w = (e.pageX - this.offsetLeft) - rect.startX;
rect.h = (e.pageY - this.offsetTop) - rect.startY ;
ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
drawRect("fill");
}
}
mouseMove()函數纔是關鍵的一步。在mouseMove()函數中首先檢測drag，如果是true意味着想要繪製一個矩形，如果是false只是意味着用戶只在畫布上移動鼠標，並不想畫矩形。如果drag是true，通過鼠標跟隨位置計算出矩形的寬度和高度。如果要做到這一點，我們需要減去鼠標當前的位置。這樣得到想要繪製矩形的width和height，但在繪製之前，需要通過clearRect()方法，將Cavans畫布清除乾淨。然後再調用繪製矩形的函數drawRect()。
第五步：繪製矩形
function drawRect(style){
if (style==="fill"){
ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
}
if (style==="stroke"){
ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
}
}
drawRect()函數是真正繪製矩形的，在這個函數中傳了一個style參數。如果是fill繪製一個填充矩形，如果是stroke將繪製一個邊框矩形。
效果出來了。你可以將傳的參數"fill"換成'"stroke"'就可以繪製一個只有邊框的矩形。
總結
本文介紹了在Canvas中繪製矩形的幾種方法：
- 使用Canvas中的路徑
moveTo()、lineTo()配合fill()和stroke()繪製矩形 - 使用Canvas中的
rect(x,y,width,heihgt)配合fill()和stroke()繪製矩形 - 使用
fillRect(x,y,width,height)繪製一個填充的矩形 - 使用
strokeRect(x,y,width,height)繪製一個邊框矩形
另外還可以通過clearRect(x,y,width,height)清除畫布。在Canvas中除了矩形之外，還有圓形之類的。在下一節中，我們來學習怎麼在Canvas繪製圓。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/canvas/drawing-rectangular.html © w3cplus.com著作權歸作者所有。
個人建了前端學習羣，旨在一起學習前端。純淨、純粹技術討論，非前端人員勿擾！入羣加我微信：iamaixiaoxiao。
