Canvas學習：繪制矩形

TiaraBerlin 7年前發布 | 21K 次閱讀 CSS 前端技術 canvas

通過前面教程的學習，我們可以在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();

}

Canvas學習：繪制矩形

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();

}

Canvas學習：繪制矩形

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

本文由用戶 TiaraBerlin 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1489651213783.html

CSS 前端技術 canvas

Canvas學習：繪制矩形

繪制矩形的方法

路徑繪制矩形

rect()繪制矩形

fillRect()繪制填充矩形

strokeRect()繪制邊框矩形

同時繪制有邊框和填充色的矩形

繪制折角或圓角矩形

改變矩形的樣式

清除矩形

通過JS繪制矩形

第一步：監聽畫布上的鼠標事件

第二步：寫mouseDown()函數

第三步：寫mouseUp()函數

第四步：寫mouseMove()函數

第五步：繪制矩形

總結

相關經驗

相關資訊

相關文檔

目錄