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()用来停止此方法的执行

canvas画布

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

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

角度转弧度公式

- 绘制填充文本

font

绘制图片

推荐阅读更多精彩内容