canvas

API

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

canvas

• 属性
  width height

用css和<canvas width='400' height='300'></canvas>设置的宽高的区别：当下载画布时，显示的宽高是canvas设置的，所以不要用css设置宽高

• 方法
  getContext

绘制直线

• 获取画图环境

  var c=document.getElementById('id');
  var cxt=c.getContext('2d')

• 设置绘图路径
  cxt.moveTo()
cxt.lineTo()

• 描边
  cxt.strokeStyle='red'
cxt.lineWidth='100px'
cxt.stroke()

• 填充
  cxt.fill()
cxt.fillStyle='red'设置填充颜色

  填充到边框宽度的一半

• 路径的开始和关闭：beiginPath()、closePath()

• rect(x，y，宽，高)，绘制矩形

快速矩形工具

• 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