canvas簡介
什么是canvas
canvas是一個html標簽图谷，但是給js提供了接口呻惕，通過js代碼可以在canvas元素上畫圖
canvas的應用
游戲
炫酷效果嘁信、banner
報表尤蛮，可視化數(shù)據(jù)
地圖
圖形編輯器呐馆、模擬器
canvas 基礎
canvas 元素
屬性
width
height
方法
getContext() 獲取繪圖環(huán)境 參數(shù)2d,webgl
繪圖環(huán)境2d
坐標 x左標 y坐標
原點 左上角
Canvas 基本會話
路徑開始和閉合
beginPath() 開啟新的路徑(狀態(tài)) 并且結束前面的路徑
closePath() 結束當前路徑 并且使當前路徑閉合
線
moveTo(x, y) 起始點坐標
lineTo(x, y) 繪制直線（接著上一個點）
快速矩形工具
rect(x, y, w, h) 繪制矩形的路徑
strokeRect(x,y,w,h) 繪制描邊的矩形
fillStyle(x,y,w,h) 繪制的填充的矩形
clearRect(x,y,w,h) 清除矩形（繪制的矩形區(qū)域內(nèi)的內(nèi)容將被擦除）
畫圓(弧)
arc(x,y,r,start, end, true/false)
最后一個參數(shù)是表示 順時針(false)還是逆時針(true) 默認false
文字
font 屬性 設置大小和字體
textAlign 屬性 文字的水平對齊方式 start(默認)/end/left/right/center
textBaseLine 屬性 文字的垂直對齊方式 alphabetic(默認)/top/bottom/middle
fillText(text, x, y) 填充文字
strokeText(text, x, y) 描邊文字
measureText(text) 返回改文本在畫布中所占的寬度
描邊
stroke() 填充當前路徑
strokeStyle 屬性 設置描邊顏色
lineWidth 屬性 設置描邊線條寬度
填充
fill() 填充當前的路徑
fillStyle 屬性 設置填充的顏色
注意： 非0環(huán)繞的算法
清除畫布
使用 clearRect()
重新設置 canvas的寬度canvas.width=canvas.width
作業(yè)
代碼 1 遍 （01.html除外）
整理筆記（博客）
使用循環(huán)狞尔，畫10行10列表格
畫畫板： 拖動鼠標丛版，在canvas上劃線
餅狀圖(把文字顯示在上面)
附錄 Canvas 案例
http://unclealan.cn/my/demos/
http://echarts.baidu.com/examples.html
