Canvas繪製矩形

一、繪製基本矩形

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

Canvas是HTML 5標準中新加入的元素，在網頁中創建圖形可以使用它。使用canvas繪製矩形是最基礎的操作之一，下面介紹如何繪製基本矩形。

使用fillRect()方法可以繪製矩形，其參數含義依次為矩形左上角的橫坐標、縱坐標以及寬度和高度。在上述代碼中，我們首先獲取畫布的上下文對象ctx，並將填充顏色設置為紅色，接着調用fillRect()方法完成繪製。繪製的矩形左上角坐標是(50,50)，寬度和高度都是100px。

二、繪製邊框矩形

let canvas2 = document.getElementById('myCanvas2');
let ctx2 = canvas2.getContext('2d');
ctx2.strokeStyle = "blue";
ctx2.strokeRect(50, 50, 100, 100);

與填充矩形不同，繪製邊框矩形需要使用strokeRect()方法，其參數含義與fillRect()相同。在上述代碼中，我們同樣先獲取畫布的上下文對象ctx2，將邊框顏色設置為藍色，接着調用strokeRect()繪製矩形的邊框。繪製的矩形與前面的例子相同。

三、繪製圓角矩形

let canvas3 = document.getElementById('myCanvas3');
let ctx3 = canvas3.getContext('2d');
let x = 50;
let y = 50;
let w = 150;
let h = 100;
let r = 20;
ctx3.beginPath();
ctx3.moveTo(x + r, y);
ctx3.lineTo(x + w - r, y);
ctx3.arc(x + w - r, y + r, r, 1.5*Math.PI, 0);
ctx3.lineTo(x + w, y + h - r);
ctx3.arc(x + w - r, y + h - r, r, 0, 0.5*Math.PI);
ctx3.lineTo(x + r, y + h);
ctx3.arc(x + r, y + h - r, r, 0.5*Math.PI, Math.PI);
ctx3.lineTo(x, y + r);
ctx3.arc(x + r, y + r, r, Math.PI, 1.5*Math.PI);
ctx3.closePath();
ctx3.fillStyle = "green";
ctx3.fill();

繪製圓角矩形需要分成四段繪製。在上述代碼中，我們定義了矩形左上角坐標、寬度和高度以及圓角的半徑。接着通過beginPath()方法開始繪製路徑並通過moveTo()方法將路徑移動到左上角圓角的起點。接下來繪製第一段直線，再繪製第一個圓弧。繪製第二段直線，再繪製第二個圓弧。繪製第三段直線，再繪製第三個圓弧。繪製最後一段直線後，調用closePath()方法閉合路徑，並將填充顏色設置為綠色，調用fill()方法完成繪製。

四、繪製漸變矩形

let canvas4 = document.getElementById('myCanvas4');
let ctx4 = canvas4.getContext('2d');
let grd = ctx4.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, "#ff0000");
grd.addColorStop(1, "#00ff00");
ctx4.fillStyle = grd;
ctx4.fillRect(50, 50, 100, 100);

使用createLinearGradient()方法可以創建線性漸變色。其參數依次為漸變起點橫、縱坐標以及漸變終點橫、縱坐標。接着使用addColorStop()方法指定漸變色。其中第一個參數為0表示顏色在起點時完全不透明，第二個參數為1表示顏色在終點時完全不透明。在上述代碼中，我們定義了矩形左上角坐標為(50,50)，寬度和高度都是100px，並使用線性漸變色填充。

五、繪製圖片矩形

let canvas5 = document.getElementById('myCanvas5');
let ctx5 = canvas5.getContext('2d');
let img = new Image();
img.src = "img.jpg";
img.onload = function() {
    ctx5.drawImage(img, 50, 50, 100, 100);
}

使用drawImage()方法可以在矩形中繪製圖片。其參數依次為圖片對象、起始點橫、縱坐標以及繪製寬度和高度。在上述代碼中，我們獲取了圖片對象，等待圖片加載完成後調用drawImage()方法將圖片繪製在矩形中心。