canvas画布

• 用于绘制图像，本身不具备绘制能力，需要通过脚本来完成绘画，通常这个脚本就是javascript
• canvas的默认宽高为300*150，不同通过css或行内样式修改它的宽高，它有自己的宽高属性
• canvas是一个html元素，通过js来执行绘制
• getContext()是用来获取canvas上下文渲染环境和绘画功能的方法,目前只有一个参数：'2d'，代表返回一个2d的绘制环境，将来有可能3d，但是目前不支持
• 它可以做什么
  • html5小游戏
  • 绘制图片，图标，图表，曲线图等等，例如地图上的热力图等等
  • 以及各种酷炫的动画效果都可以通过canvas来完成(可以了解一下WEBGL<http://www.hewebgl.com/>)
• 画布栅格
  - ![img](https://mdn.mozillademos.org/files/224/Canvas_default_grid.png)
  • 通常画布的一个格子就代表canvas中元素的一像素，栅格的左上角为起点，坐标0, 0，所有位置都相对于原点定位，
• 使用：

  - var canvas = document.gteElementById('canvas');
  - var context = canvas.getContext('2d');

环境准备好，调用context的方法属性绘制即可

• 属性及方法
  - beginPath()
  • 新开始一条路径，绘制方法被指向新路径
    - closePath()
  • 闭合当前路径，让绘制命令重新指向上下文
    - stroke()
  • 通过线条来绘制图像轮廓
  • fill()
    • 通过填充路径的内容区域生成实心图形
  • moveTo(x, y)
    • 描述起点坐标
      - lineTo(x, y)
    • 描述终点坐标
      - rect(x, y, width, height)

    绘制矩形x,y为绘制的起点坐标，width和height为要绘制矩形的宽高，无需加px

    • 需要配和stroke绘制带边框的矩形，或者fill绘制实心矩形
      - strokeRect(x, y. width, height)
    • 参数同上，绘制边框矩形
      - fillRect(x,y,width,height)
    • 参数同上，绘制填充矩形
      - clearRect(x,y,width,height)
    • 清除指定区域矩形,会留下一块白色矩形区域
      - arc(x,y,r,sangle,eangle,counterclockwise)
    • 圆弧
    • x,y为绘制圆的圆心坐标
    • r为圆的半径
    • sangle,eangle为圆的起始角度和结束角度
    • counterclockwise，可选参数，表示绘制圆是顺时针还是逆时针，true为逆时针
  • strokeStyle
    • 描边的颜色
      -fillStyle
    • 填充的颜色
  • shadowColor
    • 阴影颜色
  • shadowBlur
    • 阴影模糊级别
  • shadowOffsetX
    • 阴影水平偏移量
  • shadowOffsetY
    • 阴影垂直偏移量
  • lineCap
    • 设置线条两端结束位置的形状
    • butt默认
    • round圆形帽
    • square正方形
  • lineJoin

    • 设置线条与线条接合处的样式

    • miter (默认)， 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。
    • round通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。
    • bevel在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。
  • lineWidth
    • 线条宽度，以像素计算，没有px
  • rotate(angle)
    • 旋转

  • 角度转弧度公式

    • deg乘以Math.PI/180
    • deg为要绘制的角度
    • Math.PI为圆周率，也就是180度，但是它为一个浮点数，即使除以180也不能忽略它的小数
  • translate(x, y)
    • 移动原点
    • 将一个坐标原点向x,y正方向移动，如果坐标原点不在原来的位置，则以新的位置加上要移动的位置
  • scale(x, y)
    • 缩放x轴和y轴分别设置缩放
      -rotate(x, y)
    • 旋转
    • 凡是牵扯到度数，都用公式deg乘以Math.PI/180来计算
  • arcTo(x1,y1,x2,y2,r)
    • 画圆角，一般两个直线相交的地方，用此方法绘制成圆弧，x1,y1指圆弧开始的x坐标和y坐标，x2,y2指圆弧结束的x和y坐标，r指半径
  • setLineDash/lineDashOffset/getLineDash
    • 绘制虚线
    • setLineDash([实线长度, 间隙长度])方法接受一个数组，来指定线段与间隙的交替
    • lineDashOffset设置起始偏移量
    • getLineDash()返回当前虚线的样式，为一个数组
  • fillText(text, x, y [, maxWidth])

    - 绘制填充文本

    • text文本
      -x,y指定的坐标
    • maxWidth最大宽度，可选
  • strokeText(text, x, y [, maxWidth])
    • 绘制文本边框
      -text文本
    • x,y指定坐标
    • maxWidth最大宽度，可选

  font

  • 文本样式
  • 和css设置字体相似，复合设置
  • 例如：context.font='100px sans-serif';
    -textAlign/textBaseline/direction
  • textAlign(文本对齐选项): start|end|left|right|center
    -textBaseline(基线对齐选项)：top|hanging|middle|alphabetic|ideographic|bottom direction(文本方向)：ltr|rtl|inherit

  • 绘制图片

    • drawImage(imgElement,x,y,width,height)
    • x,y绘制图片的起始坐标
    • imgElement 要绘制的图片元素,或者为一个canvas的引用
    • width,height,设置图片的宽高
  • 裁剪图片
    • drawImage(imgElement,sx, sy, swidth, sheight, x,y,width,height)
    • imgElement 要绘制的图片元素,或者为一个canvas的引用
    • sx, sy(可选)要裁剪的起始位置
    • swidth, sheight(可选)要裁剪区域的宽高
    • x,y放置原始图片的位置
    • width,height (可选)原始图片的宽高
    • 为了不失真，一般尝试让swidth, sheight和width、height相等，x,y原点，去改变sx,sy(裁剪的起始位置)即可，实际根据需求来定
  • save()/restore()
    -save()保存状态，保存在栈中，类似于数组的push
    • restore()恢复状态，类似于数组的pop
  • clip()
    • 裁剪路径
    • 把一个路径之外的内容进行裁剪，只保留路径本身内部的内容
  • 用于控制动画的常用方法
    • setInterval()
    • setTimeout()
    • requestAnimationFrame()
      • 只执行一次，一般通过递归调用来完成动画制作
      • 接受一个回调函数，专门提供给动画的api，默认刷新帧率为一秒60次，优于以上两个方法，比如页面未激活状态下回自动暂停，节省cpu的开销
      • cancelAnimationFrame()用来停止此方法的执行