canvas day-01

课程

HTML5 新的API
微信开发 小程序 微信公众号

API

• 应用程序接口
• 一个程序提供给另一个程序 可以对本程序进行操作
• 外部接口： 查看天气， 汽车违章，菜谱等 接口地址：URL， 对URL进行请求。接口通常返回 json数据/xml数据
• dom是API， bom也是API， nodeJS中的模块也是API

HTML5新增API

• 地理定位
• 调用电脑摄像头 麦克风
• 本地存储缓存， localStorage sessionStorage
• 文件API（有选择的读取文件）
• .....

微信

• 微信公众号（订阅号 服务号 企业号）
• 微信WEB
• 微信小程序

Canvas 画布

canvas用途

• 游戏 小游戏
• 图表 报表 如 Charts插件
• 炫酷效果 banner
• 模拟器、图形编辑器 等

兼容性

IE9以上和其他浏览器

canvas 标签

属性

• width
• height

方法

• getContext() 参数 2d/webgl

注意

css设置的宽高跟width/height设置的宽高 不同

Context环境

通过 getContext方法获取绘图环境（绘图上下文）（对象）
绘制图形通过该对象提供的方法/属性

基本绘图

路径

• moveTo() 起始位置
• lineTo() 直线 ，如果没有moveTo() 第一个lineTo()替代 moveTo()

路径的开始和关闭

• beginPath() 开启路径
• closePath() 关闭路径 结束当前的路径，自动闭合
• 注意： 复杂的图形，一定要开启和关闭路径

描边 stroke()

• stroke() 方法
• strokeStyle 设置描边颜色
• lineWidth 设置描边的粗细

填充

• fill() 填充
• fillStyle 设置填充颜色

快速矩形工具

• rect(x, y, width, height) 绘制矩形路径
• strokeRect(x, y, width, height) 描边矩形
• fillRect(x,y,width,height) 填充矩形
• clearRect(x,y,w,h) 清除矩形 （矩形范围内的内容会被擦除）

圆形(圆弧)

• arc(x,y,r,start, end, wise) 绘制圆弧
• start/end是起始位置 单位是 弧度 ， 360角度 = 2PI， 180角度 = PI
• 最后一个参数 顺时针(false)/逆时针(true) 默认false