使用CanvasFillRect快速繪製矩形圖形

Canvas是HTML5新增的標籤，通過Canvas，我們可以在網頁上繪製圖形、製作動畫等。其中CanvasFillRect是一個常用的方法，它可以快速繪製矩形圖形。下面將從以下幾個方面，詳細介紹CanvasFillRect的使用方法。

一、CanvasFillRect方法概述

CanvasFillRect是Canvas API中的繪製矩形方法，可以繪製一個填充顏色的矩形。該方法共有四個參數：x、y、width、height，分別表示矩形的左上角坐標和寬高。下面是一個簡單的CanvasFillRect示例代碼：

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 100, 50);

這段代碼繪製了一個左上角坐標為(0,0)、寬為100、高為50的紅色矩形。

二、使用CanvasFillRect繪製漸變矩形

除了填充單一顏色的矩形，CanvasFillRect還可以填充漸變色。Canvas API中提供了線性漸變和徑向漸變兩種方式。下面是一個繪製線性漸變矩形的示例代碼：

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var grd = ctx.createLinearGradient(0, 0, 200, 0);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "white");
    ctx.fillStyle = grd;
    ctx.fillRect(0, 0, 200, 100);

這段代碼繪製了一個從左到右，從紅色漸變為白色的矩形。

三、使用CanvasFillRect繪製帶邊框的矩形

在實際開發中，經常會需要繪製帶邊框的矩形。可以通過Canvas API中的strokeRect方法實現。strokeRect方法與fillRect方法使用方式相同，只是它繪製的是矩形的邊框而非填充顏色。下面是一個繪製帶邊框的矩形的示例代碼：

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 100, 50);
    ctx.strokeStyle = "green";
    ctx.strokeRect(0, 0, 100, 50);

這段代碼繪製了一個左上角坐標為(0,0)、寬為100、高為50的紅色填充的矩形和一個相同大小的綠色邊框矩形。

四、使用CanvasFillRect繪製圓角矩形

除了普通矩形，Canvas API也支持繪製圓角矩形。使用CanvasFillRect繪製圓角矩形需要藉助Path2D對象。Path2D對象是Canvas API新增的對象，可以記錄路徑並重複使用。下面是一個繪製圓角矩形的示例代碼：

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var path = new Path2D();
    path.moveTo(10, 10);
    path.lineTo(90, 10);
    path.arcTo(100, 10, 100, 20, 10);
    path.lineTo(100, 40);
    path.arcTo(100, 50, 90, 50, 10);
    path.lineTo(10, 50);
    path.arcTo(0, 50, 0, 40, 10);
    path.lineTo(0, 20);
    path.arcTo(0, 10, 10, 10, 10);
    ctx.fillStyle = "red";
    ctx.fill(path);

這段代碼繪製了一個左上角坐標為(10,10)、寬為80、高為40、圓角半徑為10的紅色圓角矩形。

五、使用CanvasFillRect繪製梯形矩形

Canvas API也支持繪製梯形矩形。使用CanvasFillRect繪製梯形矩形需要藉助Canvas API中的transform方法。transform方法可以對繪製的坐標系進行變換。下面是一個繪製梯形矩形的示例代碼：

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.moveTo(50, 0);
    ctx.lineTo(150, 0);
    ctx.lineTo(100, 50);
    ctx.lineTo(0, 50);
    ctx.closePath();
    ctx.transform(1, 0, 0.5, 1, 0, 0);
    ctx.fill();

這段代碼繪製了一個底邊長為100、上底邊長為50、高為50的梯形矩形，底邊平行於x軸。使用transform方法對坐標系進行了斜切，使矩形變形。

六、小結

通過上面的介紹，我們可以了解到CanvasFillRect方法的使用方法、如何繪製漸變矩形、如何繪製帶邊框的矩形、如何繪製圓角矩形以及如何繪製梯形矩形。這些功能可以很好地滿足我們在實際開發中的需求。