HTML5畫(huà)布畫(huà)圖形 HTML5是一個(gè)新的版本的HTML，它在網(wǎng)頁(yè)開(kāi)發(fā)中引入了很多新的特性，其中一個(gè)十分重要的特性便是畫(huà)布（Canvas）。 畫(huà)布允許我們?cè)诰W(wǎng)頁(yè)上創(chuàng)建圖形，它可以通過(guò)JavaScript來(lái)實(shí)現(xiàn)畫(huà)圖的功能。下面我們來(lái)看一些繪制圖形的代碼：

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

這段代碼用于在HTML頁(yè)面中創(chuàng)建一個(gè)名為“myCanvas”的空白畫(huà)布，并建立一個(gè)上下文（context）。上下文可以用來(lái)繪制2D圖形，它是我們?cè)诋?huà)布上進(jìn)行繪制的“工具”。 下面是繪制一個(gè)矩形的代碼：

ctx.fillStyle = 'red';  // 設(shè)置顏色為紅色
ctx.fillRect (10, 10, 50, 50);  // 繪制寬50像素、高50像素的紅色矩形，左上角坐標(biāo)為(10,10)

ctx.fillStyle用于設(shè)置顏色，fillRect用于繪制矩形。 我們也可以用strokeRect來(lái)繪制邊框：

ctx.strokeRect(100,100,50,50);  // 繪制矩形的邊框，寬50像素、高50像素，左上角坐標(biāo)為(100,100)

在HTML5畫(huà)布中，使用beginPath()和endPath()來(lái)定義路徑。下面是用路徑繪制三角形的代碼：

ctx.beginPath();     // 開(kāi)始路徑繪制
ctx.moveTo(75,50);   // 將路徑起點(diǎn)移到(75,50)位置
ctx.lineTo(100,75);  // 繪制路徑至(100,75)位置
ctx.lineTo(100,25);  // 繪制路徑至(100,25)位置
ctx.closePath();     // 路徑閉合
ctx.stroke();        // 繪制路徑

以上代碼繪制了一個(gè)三角形。 除此之外，HTML5畫(huà)布還能繪制圓形、文本、圖像等。想要深入學(xué)習(xí)畫(huà)布的應(yīng)用可以查閱相關(guān)文檔。