Canvas是HTML5中的一個新標簽，它提供了一種可以通過JavaScript進行繪圖的方式。通過使用Canvas，我們可以在網頁上繪制圖形、創建動畫、處理圖像以及實現交互性的效果。本文將介紹Canvas的基礎知識，包括如何創建Canvas元素、繪制基本形狀和路徑、繪制文本、使用圖像等，同時提供詳細的代碼示例。
創建Canvas元素
要在網頁中使用Canvas，首先需要創建一個Canvas元素。可以使用HTML代碼來創建一個Canvas元素，如下所示：
<canvas id="myCanvas" width="500" height="500"></canvas>
登錄后復制
在上面的代碼中，我們創建了一個id為”myCanvas”的Canvas元素，寬度和高度都為500像素。可以通過CSS來設置其大小和位置。
獲取繪圖上下文
創建Canvas元素后，我們需要獲取繪圖上下文，才能進行繪制操作。Canvas元素提供了一個getContext()方法來獲取繪圖上下文，如下所示：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
登錄后復制
在上面的代碼中，首先使用getElementById()方法獲取了id為”myCanvas”的Canvas元素，然后使用getContext(“2d”)方法獲取了2D繪圖上下文。Canvas還支持webgl、webgl2等繪圖上下文，這里我們主要介紹2D繪圖。
繪制基本形狀和路徑
Canvas提供了一些方法來繪制基本形狀和路徑，如矩形、圓、直線等。下面是一些常用的方法及其示例代碼：
繪制矩形：
ctx.fillStyle = "red"; // 設置填充顏色 ctx.fillRect(50, 50, 100, 100); // 繪制矩形
登錄后復制
上述代碼中，我們首先使用fillStyle屬性設置填充顏色為紅色，然后使用fillRect()方法繪制一個左上角坐標為(50, 50)，寬度和高度為100像素的矩形。
繪制圓形：
ctx.beginPath(); // 開始繪制路徑 ctx.arc(100, 100, 50, 0, 2 * Math.PI); // 繪制圓 ctx.fillStyle = "blue"; ctx.fill(); // 填充路徑
登錄后復制
上述代碼中，我們首先使用beginPath()方法開始繪制路徑，然后使用arc()方法繪制一個圓心坐標為(100, 100)，半徑為50像素，起始角度和結束角度都為0的圓形。接著使用fillStyle屬性設置填充顏色為藍色，最后使用fill()方法填充路徑。
繪制直線：
ctx.moveTo(100, 200); // 將畫筆移動到坐標(100, 200) ctx.lineTo(200, 200); // 繪制直線到坐標(200, 200) ctx.strokeStyle = "green"; // 設置描邊顏色 ctx.stroke(); // 描邊路徑
登錄后復制
上述代碼中，我們首先使用moveTo()方法將畫筆移動到坐標(100, 200)，然后使用lineTo()方法繪制一條直線到坐標(200, 200)。接著使用strokeStyle屬性設置描邊顏色為綠色，最后使用stroke()方法描邊路徑。
- 繪制文本
Canvas提供了幾個方法來繪制文本，如fillText()、strokeText()等。下面是一個繪制文本的示例代碼：
ctx.font = "30px Arial"; // 設置字體樣式
ctx.fillStyle = "black"; // 設置填充顏色
ctx.fillText("Hello Canvas!", 100, 100); // 繪制填充文本
ctx.strokeStyle = "red"; // 設置描邊顏色
ctx.strokeText("Hello Canvas!", 100, 100); // 繪制描邊文本
登錄后復制
上述代碼中，我們首先使用font屬性設置字體樣式，然后使用fillStyle屬性設置填充顏色為黑色，調用fillText()方法繪制填充文本。接著使用strokeStyle屬性設置描邊顏色為紅色，調用strokeText()方法繪制描邊文本。
- 使用圖像
Canvas可以使用圖像來進行繪制，可以使用Image對象來加載圖像。下面是一個使用圖像的示例代碼：
var img = new Image(); // 創建Image對象
img.src = "image.jpg"; // 設置圖像路徑
img.addEventListener("load", function() {
ctx.drawImage(img, 0, 0); // 繪制圖像
});
登錄后復制
上述代碼中，首先創建一個Image對象，然后使用src屬性設置圖像路徑。在load事件中，調用drawImage()方法繪制圖像，參數為Image對象和左上角坐標(0, 0)。
