<canvas>是一個(gè)可以使用腳本(通常為JavaScript)來(lái)繪制圖形的 HTML 元素.例如,它可以用于繪制圖表、制作圖片構(gòu)圖或者制作簡(jiǎn)單的(以及不那么簡(jiǎn)單的)動(dòng)畫(huà)。
<canvas> 標(biāo)簽只有兩個(gè)屬性—— width和height。這些都是可選的，并且同樣利用 DOMproperties 來(lái)設(shè)置。當(dāng)沒(méi)有設(shè)置寬度和高度的時(shí)候，canvas會(huì)初始化寬度為300像素和高度為150像素。

替換內(nèi)容

<canvas>元素與<img>標(biāo)簽的不同之處在于，就像<video>，<audio>，或者 <picture>元素一樣，很容易定義一些替代內(nèi)容。由于某些較老的瀏覽器（尤其是IE9之前的IE瀏覽器）或者文本瀏覽器不支持HTML元素"canvas"，在這些瀏覽器上你應(yīng)該總是能展示替代內(nèi)容。

我們只是在<canvas>標(biāo)簽中提供了替換內(nèi)容。不支持<canvas>的瀏覽器將會(huì)忽略容器并在其中渲染后備內(nèi)容。而支持<canvas>的瀏覽器將會(huì)忽略在容器中包含的內(nèi)容，并且只是正常渲染canvas。

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

渲染上下文

<canvas> 元素創(chuàng)造了一個(gè)固定大小的畫(huà)布，它公開(kāi)了一個(gè)或多個(gè)渲染上下文，其可以用來(lái)繪制和處理要展示的內(nèi)容。

canvas起初是空白的。為了展示，首先腳本需要找到渲染上下文，然后在它的上面繪制。<canvas> 元素有一個(gè)叫做 getContext() 的方法，這個(gè)方法是用來(lái)獲得渲染上下文和它的繪畫(huà)功能。getContext()只有一個(gè)參數(shù)，上下文的格式。

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

第一行，得到DOM對(duì)象，使用getContext()方法來(lái)訪問(wèn)繪畫(huà)上下文。

檢查支持性

替換內(nèi)容是用于在不支持<canvas>標(biāo)簽的瀏覽器中展示的。通過(guò)簡(jiǎn)單的測(cè)試getContext()方法是否存在可以檢查編程支持性。

var canvas = document.getElementById('id');

if(canvas.getContex){
    var ctx = canvas.getContext('2d');
    // drawing code here
}else{
    //canvas-unsupported code here
}

繪制矩形

所有元素的位置都相對(duì)于原點(diǎn)定位。
canvas提供了三種方式繪制矩形。

fillRect(x,y,width,height)  繪制一個(gè)填充的矩形

strokeRect(x,y,width,height)    繪制一個(gè)矩形的邊框

clearRect(x,y,width,height) 清除指定矩形區(qū)域，讓清除部分完全透明

x與y指定了在canvas畫(huà)布上所繪制的矩形的左上角（相對(duì)于原點(diǎn)）的坐標(biāo)。width和height設(shè)置矩形的尺寸。

繪制路徑

圖形的基本元素是路徑。路徑是通過(guò)不同顏色和寬度的線段或曲線相連形成的不同形狀的點(diǎn)的集合。一個(gè)路徑，甚至一個(gè)子路徑，都是閉合的。使用路徑繪制圖形需要一些額外的步驟。

1. 首先，需要?jiǎng)?chuàng)建路徑起始點(diǎn)
2. 使用畫(huà)圖命令去畫(huà)出路徑
3. 把路徑封閉
4. 通過(guò)描邊或填充路徑區(qū)域來(lái)渲染圖形

beginPath()

新建一條路徑，生成之后，圖形繪制命令被指向到路徑上生成路徑。

closePath()

閉合路徑之后圖形繪制命令又重新指向到上下文中。

stroke()

通過(guò)線條來(lái)繪制圖形輪廓

fill()

通過(guò)填充路徑的內(nèi)容區(qū)域生成實(shí)心的圖形。

生成路徑的第一步叫做beginPath()。本質(zhì)上，路徑是由很多子路徑構(gòu)成，這些子路徑都是在一個(gè)列表中，所有的子路徑構(gòu)成圖形。而每次這個(gè)方法調(diào)用之后，列表清空重置，然后就可以重新繪制新的圖形。

第二步就是調(diào)用函數(shù)指定繪制路徑。

第三步，閉合路徑colsePath()，不是必需的。這個(gè)方法會(huì)通過(guò)繪制一條從當(dāng)前點(diǎn)到開(kāi)始點(diǎn)的直線來(lái)閉合圖形。如果圖形已經(jīng)閉合，該函數(shù)什么也不做。
注：當(dāng)你調(diào)用fill()函數(shù)時(shí)，所有沒(méi)有閉合的形狀都會(huì)自動(dòng)閉合，所以你不需要調(diào)用closePath()函數(shù)。但是調(diào)用stroke()時(shí)不會(huì)自動(dòng)閉合。

moveTo(x,y)

將筆觸移動(dòng)到指定的坐標(biāo)上。
當(dāng)canvas初始化或者beginPath()調(diào)用后，你通常會(huì)使用movTo()函數(shù)設(shè)置起點(diǎn)。

lineTo(x,y)

繪制一條從當(dāng)前位置到指定坐標(biāo)的直線

arc(x,y,radius,startAngle,endAngle,anticlockwise)

畫(huà)一個(gè)以(x,y)為圓心的以radius為半徑的圓弧，從startAngle開(kāi)始到endAngle結(jié)束(弧度=Math.PI/180*角度)，按照anticlockwise給定的方向（默認(rèn)為false,順時(shí)針）生成。

貝塞爾曲線

一般用來(lái)繪制復(fù)雜有規(guī)律的圖形。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
繪制三次貝塞爾曲線，cp1x,cp1y為控制點(diǎn)一，cp2x,cp2y為控制點(diǎn)二，x,y為結(jié)束點(diǎn)。

樣式和顏色

colors

fillStyle = color
設(shè)置圖形的填充顏色

strokeStyle = color
設(shè)置圖形輪廓的顏色

透明度

通過(guò)設(shè)置globalAlpha屬性或者使用一個(gè)半透明顏色作為輪廓或填充的樣式。
globalAlpha = transparencyValue
有效值范圍0.0到1.0. 默認(rèn)為1.0
ctx.globalAlpha = 0.1;

Line styles

lineWidth = value 線條寬度

lineCap = type 線條末端樣式

lineJoin = type 線條與線條間接合處的樣式

miterLimit = value 限制當(dāng)兩條線相交時(shí)交接處最大長(zhǎng)度；所謂交接處長(zhǎng)度（斜接長(zhǎng)度）是指線條交接處內(nèi)角頂點(diǎn)到外角頂點(diǎn)的長(zhǎng)度。
就如上一個(gè)例子所見(jiàn)的應(yīng)用 miter 的效果，線段的外側(cè)邊緣會(huì)延伸交匯于一點(diǎn)上。線段直接夾角比較大的，交點(diǎn)不會(huì)太遠(yuǎn)，但當(dāng)夾角減少時(shí)，交點(diǎn)距離會(huì)呈指數(shù)級(jí)增大。miterLimit 屬性就是用來(lái)設(shè)定外延交點(diǎn)與連接點(diǎn)的最大距離，如果交點(diǎn)距離大于此值，連接效果會(huì)變成了 bevel。

getLineDash() 返回一個(gè)包含當(dāng)前虛線樣式，長(zhǎng)度為非負(fù)偶數(shù)的數(shù)組。

setLineDash(segments) 設(shè)置當(dāng)前虛線樣式

lineDashOffset = value 設(shè)置虛線樣式的起始偏移量