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中文網其他相關文章！
