JavaScript怎麼畫出複雜圖形

JavaScript是一種十分強大的程式語言，它在現代web開發中扮演著重要的角色。除了實現網頁互動和動態效果外，JavaScript還能夠透過繪圖API來實現各種複雜的圖形。那麼，這篇文章將會與你分享如何用JavaScript畫出複雜的圖形。

畫布和上下文

在Javascript中實作圖形，我們需要先建立一個畫布(Canvas)元素，然後取得它的上下文(Context)。 Canvas是一個HTML5標籤，透過它可以在網頁上建立一個帶有繪圖功能的矩形區域。而取得上下文則是為了使用canvas提供的繪圖API。

建立Canvas元素十分簡單，只要在HTML中加入以下程式碼：

<canvas id="myCanvas">
  Your browser does not support this feature.
</canvas>

其中id屬性可以用來取得canvas元素，而嵌套在標籤中間的文字則是在不支援canvas的瀏覽器中顯示的替代文字。接下來，我們可以用JavaScript來取得canvas元素和上下文。程式碼如下：

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

這裡使用document物件的getElementById方法取得id為myCanvas的canvas元素，並透過getContext方法取得2D上下文。 Canvas支援3種上下文類型：2D、WebGL和WebGL2。在本文中，我們將使用2D上下文。

繪製基本形狀

在取得到2D上下文之後，我們就可以開始畫圖了。 Canvas API提供了一系列用來描述基本形狀的方法，常用的有：rect、arc、line等。

例如，我們可以透過以下程式碼繪製一個矩形：

ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 50, 50);

在上述程式碼中，fillStyle屬性用於設定填滿顏色，fillRect方法則用於繪製矩形。 fillRect方法的參數為矩形的左上角座標(x,y)，以及矩形的寬度和高度(width,height)。

接下來，我們可以透過以下程式碼繪製一個圓形：

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "#FFFF00";
ctx.fill();

上述程式碼中，使用beginPath方法開始繪製一個新路徑，arc方法用於繪製圓形路徑，參數為圓心座標(x,y)、半徑(r)、起始角度(startAngle)和結束角度(endAngle)。由於我們要畫一個完整的圓形，因此起始角度為0，結束角度為2π。最後設定填滿顏色為黃色，並用fill方法填滿路徑。

繪製複雜形狀

除了基本形狀，我們還可以使用Canvas API繪製各種複雜形狀。這需要用到Path2D物件和貝塞爾曲線。

Path2D物件是一種保存路徑的資料結構，可以透過該物件來描述複雜的路徑。例如，以下程式碼繪製了一條由3個線段組成的路徑：

let path = new Path2D();
path.moveTo(0, 0);
path.lineTo(0, 50);
path.lineTo(50, 50);
ctx.stroke(path);

上述程式碼中，使用moveTo方法將路徑的起點設定為(0,0)，使用lineTo方法依序畫出3個線段，最後使用stroke方法繪製路徑。

貝塞爾曲線(Bézier curve)是一種數學函數，用來描述平滑的曲線。 Canvas API提供了quadraticCurveTo和bezierCurveTo兩個方法來繪製二次和三次貝塞爾曲線。

例如，以下程式碼繪製了一條由3個點組成的三次貝塞爾曲線路徑：

let path = new Path2D();
path.moveTo(20, 20);
path.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke(path);

上述程式碼中，使用moveTo方法將路徑的起點設定為(20,20 )，bezierCurveTo方法在後面緊接著三組參數，分別為2個控制點和1個終點。依照三次貝塞爾曲線的定義，起點和終點在曲線上，而控制點則影響曲線的彎曲程度。

繪製漸層和圖片

除了形狀，Canvas API也支援漸層和圖片繪製。首先看看漸層的繪製方式。

漸層可以用來填滿顏色或描邊顏色。 Canvas API支援線性漸層和徑向漸層。以下是使用線性漸層填滿一個矩形的程式碼：

let gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#00FF00');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

在上述程式碼中，使用createLinearGradient方法建立線性漸變，參數為起點座標(x0,y0)和終點座標(x1,y1)。 addColorStop方法用於設定漸變顏色的位置和值，其中的位置參數是介於0~1之間的數值。

接下來，我們來看看圖片繪製。

Canvas API支援使用圖片作為畫布，這樣可以實現更複雜的效果。以下是使用圖片填滿一個矩形的程式碼：

let img = new Image();
img.onload = function(){
  let pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};
img.src = 'image.png';

在上述程式碼中，我們先建立了一個圖片對象，並為其設定了onload事件。在圖片載入完畢後，我們使用createPattern方法建立圖案，參數為圖片物件和繪製方式('repeat'表示平鋪展開)。最後使用fillRect方法填滿圖案。

總結

透過Canvas API的介紹，我們可以知道JavaScript可以用來繪製各種複雜的圖形。除了基本形狀外，透過Path2D物件和貝塞爾曲線可以描述各種複雜路徑。透過漸層和圖片繪製，我們還可以實現更豐富的效果。當然，這只是淺顯的介紹，Canvas API功能豐富，有許多更進階的應用方法，需要我們不斷學習和實踐。

以上是JavaScript怎麼畫出複雜圖形的詳細內容。更多資訊請關注PHP中文網其他相關文章！