課程
HTML5 新的API
微信開發(fā) 小程序 微信公眾號
API
- 應用程序接口
- 一個程序提供給另一個程序 可以對本程序進行操作
- 外部接口: 查看天氣为朋, 汽車違章,菜譜等 接口地址:URL厚脉, 對URL進行請求习寸。接口通常返回 json數(shù)據(jù)/xml數(shù)據(jù)
- dom是API, bom也是API傻工, nodeJS中的模塊也是API
HTML5新增API
- 地理定位
- 調(diào)用電腦攝像頭 麥克風
- 本地存儲緩存融涣, localStorage sessionStorage
- 文件API(有選擇的讀取文件)
- .....
微信
- 微信公眾號(訂閱號 服務號 企業(yè)號)
- 微信WEB
- 微信小程序
Canvas 畫布
canvas用途
- 游戲 小游戲
- 圖表 報表 如 Charts插件
- 炫酷效果 banner
- 模擬器、圖形編輯器 等
兼容性
IE9以上和其他瀏覽器
canvas 標簽
屬性
- width
- height
方法
- getContext() 參數(shù) 2d/webgl
注意
css設(shè)置的寬高跟width/height設(shè)置的寬高 不同
Context環(huán)境
通過 getContext方法獲取繪圖環(huán)境(繪圖上下文)(對象)
繪制圖形通過該對象提供的方法/屬性
基本繪圖
路徑
- moveTo() 起始位置
- lineTo() 直線 精钮,如果沒有moveTo() 第一個lineTo()替代 moveTo()
路徑的開始和關(guān)閉
- beginPath() 開啟路徑
- closePath() 關(guān)閉路徑 結(jié)束當前的路徑,自動閉合
- 注意: 復雜的圖形剃斧,一定要開啟和關(guān)閉路徑
描邊 stroke()
- stroke() 方法
- strokeStyle 設(shè)置描邊顏色
- lineWidth 設(shè)置描邊的粗細
填充
- 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)容會被擦除)
圓形(圓弧)
- arc(x,y,r,start, end, wise) 繪制圓弧
- start/end是起始位置 單位是 弧度 轨香, 360角度 = 2PI, 180角度 = PI
- 最后一個參數(shù) 順時針(false)/逆時針(true) 默認false