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