Canvas 畫布
canvas用途
- 游戲 小游戲
- 圖表 報(bào)表 如 Charts插件
- 炫酷效果 banner
- 模擬器嘲碧、圖形編輯器 等
兼容性
IE9以上和其他瀏覽器
canvas 標(biāo)簽
屬性
- width
- height
方法
- getContext() 參數(shù) 2d/webgl
注意
css設(shè)置的寬高跟width/height設(shè)置的寬高 不同
Context環(huán)境
通過(guò) getContext方法獲取繪圖環(huán)境（繪圖上下文）（對(duì)象）
繪制圖形通過(guò)該對(duì)象提供的方法/屬性
基本繪圖
路徑
- moveTo() 起始位置
- lineTo() 直線 挂据，如果沒(méi)有moveTo() 第一個(gè)lineTo()替代 moveTo()
路徑的開始和關(guān)閉
- beginPath() 開啟路徑
- closePath() 關(guān)閉路徑 結(jié)束當(dāng)前的路徑旗闽，自動(dòng)閉合
- 注意： 復(fù)雜的圖形智润，一定要開啟和關(guān)閉路徑
描邊 stroke()
- stroke() 方法
- strokeStyle 設(shè)置描邊顏色
- lineWidth 設(shè)置描邊的粗細(xì)
填充
- fill() 填充
- fillStyle 設(shè)置填充顏色
快速矩形工具
- rect(x, y, width, height) 繪制矩形路徑
- strokeRect(x, y, width, height) 描邊矩形
- fillRect(x,y,width,height) 填充矩形
- clearRect(x,y,w,h) 清除矩形 （矩形范圍內(nèi)的內(nèi)容會(huì)被擦除）
圓形(圓弧)
- arc(x,y,r,start, end, wise) 繪制圓弧
- start/end是起始位置 單位是 弧度 ， 360角度 = 2PI诬像， 180角度 = PI
- 最后一個(gè)參數(shù) 順時(shí)針(false)/逆時(shí)針(true) 默認(rèn)false
