HTML5繪圖總結詳解
HTML5的繪圖基礎
? 在HTML5以前的時代，web前端開發者無法在HTML頁面上動態地繪制圖片
? HTM5新增了一個<canvas../>元素，相當於一個畫布，可以獲得一個CanvasRenderingContext2D對象
? CanvasRenderingContext2D提供了很多畫圖API
HTML5的畫圖主要是通過CanvasRenderingContext2D這個對象的API來完成的，畫圖的所有方法都被封裝到它裏邊。
在學習內容中，我們都是簡稱這個對象為：cxt。
在Canvas上畫圖的流程
? 步驟1:得到 <canvas../>DOM對象
? 步驟2:調用Canvas對象的getContext()方法得到CanvasRederingContext2D對象（getContext方法裏面傳一個參數：”2d”）
? 步驟3:調用CanvasRederingContext2D完成畫圖
HTML5繪制幾何圖形
CanvasRenderingContext2D對象，只提供了兩個方法來繪制幾何圖形
1. fillStyle="顏色"
2. filleRect(float x,float y,float width,float,height)
3. strokeStyle="顏色"
4. lineWidth=10;
5. lineJoin="meter|round|bevel"
6. strokeRect(float x,float y,float width,float,height)
並沒有直接提供其他幾何圖形（圓形、橢圓、三角）等方法（這些我們都要通過路徑來實現）
畫空心和實心
1. 畫實心的話，我們可以用fillStyle來設置一下實心的顏色。
2. 然後fillRect來畫一個實心的矩形框。
3. 那空心的話，我們用strokeStyle，來設置顏色。
4. lineWidth來設置線條的寬度。
5. 然後lineJoin設置線條交界處，是方角還是圓角。
6. 然後strokeRect來畫一個空心的矩形。
HTML5繪制字符串
CanvasRenderingContext2D為繪制文字提供了以下兩個方法：
fillText(String text，float x，float y，[float maxwidth]):填 充字符串
strokeText(String text，float x，float y，[float maxwidth]):繪制邊框
font="bold 45px 宋體"
textAlign設置繪制字符串的水平對齊方式，start|end|left|right|center
textBaseAlign:重直對齊方式：top|hanging|middle|alphabetic|bottom
在畫字符串之前，在html5中我們應該使用font="bold 45px 宋體"，設置一下字體，這個字體裏面其實是3個屬性。分別表示文字的：粗細、大小和字體。
在設置完了以後，就可以畫文字了。fillText是畫的實心的文字；strokeText是畫的空心的文字。
設置陰影
shadowBlur:陰影模糊度，浮點數越大越模糊
shasowColor:陰影顏色
shadowOffsetX: x方向的偏移
shadowOffsetY: y方向的偏移
繪制路徑
在Canvas上使用路徑步驟：
1. 調用CanvasRenderingContext2D對象的beginPath()方法開始定義路徑
2. 調用CanvasRenderingContext2D的各種方法添加路徑
3. 調用CanvasRenderingContext2D的closePath方法關閉路徑
4. 調用CanvasRenderingContext2D的fill()或stroke()方法來填充路徑或繪制路徑邊框
添加路徑的方法
1. arc() 方法創建弧/曲線（用於創建圓或部分圓
2. arcTo() 方法在畫布上創建介於兩個切線之間的弧/曲線
3. bezierCurveTo() 方法通過使用表示三次貝塞爾曲線的指定控制點，向當前路徑添加一個點。方法在畫布上創建介於兩個切線之間的弧/曲線
4. lineTo() 方法添加一個新點，然後創建從該點到畫布中最後指定點的線條（該方法並不會創建線條）
5. moveTo 把路徑移動到畫布中的指定點，不創建線條
6. quadraticCurveTo() 方法通過使用表示二次貝塞爾曲線的指定控制點，向當前路徑添加一個點。
7. rect() 方法創建矩形
控制填充風格
線性漸變
1. CanvasGradient代表漸變填充
2. CanvasPattern代表位團填充
使用漸變步驟
3. step1:ctx.createLinearGradient(x,y,xend,yend)返回CavasGradient對象
4. step2:調用CanvasGradient對象的addColorStop(offset,color)向線性漸變中填加顏色,offset值在0-1之間
5. step3:將CanvasGradient對象賦值給xtx.fillStyle或strokeStyle屬性
這個漸變，我們有線性漸變和圓形漸變，還有填充圖像。
圓形漸變：
這個它的原理也是和線性漸變一樣的，就是兩個圓，半徑到半徑之間的這個漸變。
繪制位圖
1. CanvasRenderingContext2D繪圖方法：
drawImage(Image image,x,y)
參數 描述
img 規定要使用的圖像、畫布或視頻。
sx 可選。開始剪切的 x 坐標位置。
sy 可選。開始剪切的 y 坐標位置。
swidth 可選。被剪切圖像的寬度。
sheight 可選。被剪切圖像的高度。
x 在畫布上放置圖像的 x 坐標位置。
y 在畫布上放置圖像的 y 坐標位置。
width 可選。要使用的圖像的寬度。（伸展或縮小圖像）
height 可選。要使用的圖像的高度。（伸展或縮小圖像）
2. 繪制位圖
? var image=new Image();
? image.src=圖片地址;
? image.onload=function()
? {
? ctx.drawImage(...);
? }
3.繪制位圖有一個細節一定要註意：
就是必須得等這個位圖加載完畢之後，才能繪制，否則的話，就繪制失敗。反正原理就是，在繪圖之前，這個圖片是加載到內存的，加載完這個DOM才能進行繪圖。
HTML5繪圖總結詳解