一、什么是canvas

<canvas>是一個可以使用腳本(通常為js)在其中繪制圖形的html元素
兩個屬性：width和height 這兩個屬性是可選的

二、使用js來繪制圖像

canvas坐標(biāo)
二維網(wǎng)格：以左上角坐標(biāo)為(0, 0)

了解了canvas坐標(biāo)后，開始繪制圖像，可以分三步：
1.找到canvas元素
2.創(chuàng)建context對象
<canvas> 元素有一個做getContext() 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能。getContext()只有一個參數(shù)，上下文的格式。這里，我們采用CanvasRenderingContext2D
3.繪制你所需的圖像

三、繪制矩形

HTML中的元素canvas只支持一種原生的圖形繪制：矩形，所有其他的圖形繪制都至少需要生成一條路徑

canvas提供了三種方法繪制矩形：
繪制一個填充的矩形：
fillRect(x, y, width, height)
繪制一個矩形的邊框
strokeRect(x, y, width, height)
清除指定矩形區(qū)域，讓清除部分完全透明
clearRect(x, y, width, height)

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

四、繪制路徑

圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。一個路徑，甚至一個子路徑，都是閉合的。使用路徑繪制圖形需要一些額外的步驟。
1.需要創(chuàng)建路徑起始點
2.使用畫圖命令去畫出路徑
3.把路徑封閉
4.一旦路徑生成，就能通過描邊或填充路徑區(qū)域來渲染圖形
以下是所要用到的函數(shù)：
新建一條路徑，生成之后，圖形繪制命令被指向到路徑上生成路徑
beginPath()
閉合路徑之后圖形繪制命令又重新指向到上下文中
closePath()
這個方法會通過繪制一條從當(dāng)前點到開始點的直線來閉合圖形。如果圖形是已經(jīng)閉合了的，即當(dāng)前點為開始點，該函數(shù)什么也不做。
通過線條來繪制圖形輪廓
stroke()
通過填充路徑的內(nèi)容區(qū)域生成實心的圖形
fill()
注意：當(dāng)你調(diào)用fill() 函數(shù)時，所有沒有閉合的形狀都會自動閉合，所以你不需要調(diào)用closePath()函數(shù)。但是調(diào)用stroke()時不會自動閉合。
移動筆觸
將筆觸移動到指定的坐標(biāo)x以及y上
moveTo(x, y)
繪制一條從當(dāng)前位置到指定x以及y位置的直線
lineTo(x, y)

五、弧線

繪制圓弧或者圓，我們使用arc()方法
arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫一個以（x,y）為圓心的以radius為半徑的圓?。▓A），從startAngle開始到endAngle結(jié)束,參數(shù)anticlockwise 為一個布爾值。為true時，是逆時針方向，否則順時針方向。
注意：arc()函數(shù)中的角度單位是弧度，不是度數(shù)。角度與弧度的js表達式:radians=(Math.PI/180)*degrees。

六、貝塞爾（bezier）以及二次貝塞爾

路徑類型就是 貝塞爾曲線。二次以及三次貝塞爾曲線都十分有用，一般用來繪制復(fù)雜有規(guī)律的圖形。

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

七、矩形

rect(x, y, width, height)

繪制一個左上角坐標(biāo)為（x,y），寬高為width以及height的矩形。

八、Path2D 對象

Path2D() Path2D()會返回一個新初始化的Path2D對象（可能將某一個路徑作為變量——創(chuàng)建一個它的副本，或者將一個包含SVG path數(shù)據(jù)的字符串作為變量）。