<canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，實(shí)際上，這個(gè)標(biāo)簽和其他的標(biāo)簽一樣，其特殊之處在于該標(biāo)簽可以獲取一個(gè)CanvasRenderingContext2D對(duì)象，我們可以通過(guò)JavaScript腳本來(lái)控制該對(duì)象進(jìn)行繪圖。

<canvas></canvas>只是一個(gè)繪制圖形的容器，除了id、class、style等屬性外，還有height和width屬性。在<canvas>>元素上繪圖主要有三步： 

 1.獲取<canvas>元素對(duì)應(yīng)的DOM對(duì)象，這是一個(gè)Canvas對(duì)象；
 2.調(diào)用Canvas對(duì)象的getContext()方法，得到一個(gè)CanvasRenderingContext2D對(duì)象；
 3.調(diào)用CanvasRenderingContext2D對(duì)象進(jìn)行繪圖。
 
繪制線段moveTo()和lineTo()

以下是一個(gè)簡(jiǎn)單的<canvas>繪圖示例：

如果沒(méi)有通過(guò)moveTo()特別指定，lineTo()的起始點(diǎn)是以上一個(gè)點(diǎn)為準(zhǔn)。因此，如果需要重新選擇起始點(diǎn)，則需要通過(guò)moveTo()方法。如果需要對(duì)不同的線段設(shè)置樣式，則需要通過(guò)context.beginPath()重新開(kāi)啟一條路徑，下面是一個(gè)示例：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。