HTML5 引入了 <canvas> 元素，它是一個非常強大的工具，可以用來繪制圖形、創(chuàng)建動畫、處理圖像等。通過 JavaScript 和 <canvas> 元素的結(jié)合，開發(fā)者能夠在網(wǎng)頁上創(chuàng)建動態(tài)、交互式的圖形內(nèi)容。小編將介紹如何使用 <canvas> 元素，并展示其常見的用法。
1. <canvas> 元素概述
<canvas> 是一個空白的容器，提供一個繪圖區(qū)域。通過 JavaScript，可以在該區(qū)域內(nèi)繪制圖形、圖像、動畫等。<canvas> 本身并不包含任何內(nèi)容，而是通過腳本控制繪制。
基本語法
htmlCopy Code<canvas id="myCanvas" width="500" height="500"></canvas>
id: 該屬性為 <canvas> 元素指定唯一標(biāo)識符，可以通過 JavaScript 訪問該元素。
width: 指定畫布的寬度，單位是像素，默認(rèn)為 300px。
height: 指定畫布的高度，單位是像素，默認(rèn)為 150px。
2. 獲取 <canvas> 元素的上下文(Context)
要在 <canvas> 上進行繪圖，必須通過 JavaScript 獲取 "上下文" 對象。上下文是提供繪圖功能的接口，有多種類型，常用的是 2D 上下文(2d)，用于繪制二維圖形。
獲取 2D 上下文
htmlCopy Code<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas'); // 獲取 canvas 元素
var ctx = canvas.getContext('2d'); // 獲取 2D 繪圖上下文
</script>
getContext('2d') 方法返回一個用于繪制二維圖形的上下文對象。通過該對象，開發(fā)者可以訪問各種繪圖方法。
3. 基本繪圖方法
一旦獲取了上下文對象，就可以使用各種繪圖方法來繪制形狀、線條、文本等。
3.1 繪制矩形
通過 fillRect() 或 strokeRect() 方法可以繪制矩形。
fillRect(x, y, width, height)：繪制一個填充矩形。
strokeRect(x, y, width, height)：繪制一個矩形輪廓。
示例：繪制矩形
htmlCopy Code<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 繪制填充矩形
ctx.fillStyle = 'blue'; // 設(shè)置填充顏色
ctx.fillRect(50, 50, 200, 100); // 在 (50,50) 位置繪制一個 200x100 的藍色矩形
// 繪制矩形輪廓
ctx.strokeStyle = 'red'; // 設(shè)置邊框顏色
ctx.lineWidth = 5; // 設(shè)置邊框?qū)挾?/p>
ctx.strokeRect(100, 200, 150, 75); // 繪制一個紅色邊框的矩形
</script>
3.2 繪制圓形
要繪制圓形，可以使用 arc() 方法。
arc(x, y, radius, startAngle, endAngle, counterclockwise)：繪制圓弧或圓形。
x 和 y 是圓心的坐標(biāo)。
radius 是圓的半徑。
startAngle 和 endAngle 定義了圓弧的起始和結(jié)束角度，單位是弧度(默認(rèn) 0 是正方向的水平線)。
counterclockwise 是一個可選的布爾值，表示繪制方向。
示例：繪制圓形
htmlCopy Code<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 繪制一個圓形
ctx.beginPath(); // 開始路徑
ctx.arc(250, 250, 100, 0, Math.PI * 2); // 圓心 (250,250), 半徑 100
ctx.fillStyle = 'green'; // 填充顏色為綠色
ctx.fill(); // 填充圓形
ctx.strokeStyle = 'black'; // 設(shè)置邊框顏色為黑色
ctx.lineWidth = 5; // 設(shè)置邊框?qū)挾?/p>
ctx.stroke(); // 繪制邊框
</script>
3.3 繪制直線
繪制直線的方法有 moveTo() 和 lineTo()。
moveTo(x, y)：將畫筆移動到指定位置。
lineTo(x, y)：繪制從當(dāng)前點到指定點的直線。
示例：繪制直線
htmlCopy Code<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath(); // 開始路徑
ctx.moveTo(50, 50); // 起點
ctx.lineTo(250, 150); // 終點
ctx.strokeStyle = 'purple'; // 設(shè)置顏色為紫色
ctx.lineWidth = 3; // 設(shè)置線寬為 3
ctx.stroke(); // 繪制直線
</script>
3.4 繪制文本
通過 fillText() 或 strokeText() 方法可以繪制文本。
fillText(text, x, y)：在指定位置繪制填充文本。
strokeText(text, x, y)：在指定位置繪制邊框文本。
示例：繪制文本
htmlCopy Code<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.font = '30px Arial'; // 設(shè)置字體大小和字體
ctx.fillStyle = 'orange'; // 設(shè)置文本顏色
ctx.fillText('Hello Canvas!', 50, 100); // 繪制文本
ctx.strokeStyle = 'red'; // 設(shè)置邊框顏色
ctx.lineWidth = 2; // 設(shè)置邊框?qū)挾?/p>
ctx.strokeText('Hello Canvas!', 50, 150); // 繪制邊框文本
</script>
4. 圖像操作
<canvas> 還可以用來繪制和操作圖像，使用 drawImage() 方法。
示例：繪制圖像
htmlCopy Code<canvas id="myCanvas" width="500" height="500"></canvas>
<img id="myImage" src="image.jpg" style="display:none">
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById('myImage');
img.onload = function() {
ctx.drawImage(img, 50, 50, 200, 200); // 將圖像繪制到 canvas 上，大小為 200x200
};
</script>
5. 動畫
通過定時器(如 requestAnimationFrame)，你可以使用 <canvas> 實現(xiàn)流暢的動畫效果。
示例：簡單動畫
htmlCopy Code<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var x = 0;
var y = 50;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除之前的畫面
ctx.fillStyle = 'blue';
ctx.fillRect(x, y, 50, 50); // 繪制一個移動的矩形
x += 5; // 改變 x 坐標(biāo)
if (x > canvas.width) {
x = -50; // 如果超出邊界，則重置到起始位置
}
requestAnimationFrame(draw); // 請求下一幀
}
draw(); // 啟動動畫
</script>
6. 總結(jié)
<canvas> 元素是 HTML5 中非常有用的工具，可以用于繪制圖形、實現(xiàn)動畫、處理圖像等。通過 JavaScript 和 canvas 上下文，你可以創(chuàng)建各種復(fù)雜的圖形和交互式內(nèi)容，提升網(wǎng)頁的用戶體驗。掌握 <canvas> 的使用，可以幫助開發(fā)者實現(xiàn)更豐富的前端功能和視覺效果。
