canvas基本API，具体如下：

  1. width：canvas元素绘图表面的宽度。在默认情况下，浏览器会将canvas元素的大小设定与绘图表面大小一致。然而，如果CSS中设置canvas的元素大小，那么浏览器就会将绘图表面进行缩放，使之符合元素尺寸；
  2. height：canvas元素绘图表面的高度。在默认情况下，浏览器会将canvas元素的大小设定与绘图表面大小一致。然而，如果CSS中设置canvas的元素大小，那么浏览器就会将绘图表面进行缩放，使之符合元素尺寸；
  3. getContext()：返回与canvas元素相关的绘图环境对象，每一个canvas元素都有这样的环境对象；
  4. toDataURL(type,quality)：返回一个数据地址，可以设置为img元素的src属性值。type表示指定图像的类型，比如：image/jpeg或者image/png，如果没有指定类型，就默认为image/png。quality参数值范围是0到1，表示图像的质量；
  5. toBlob(callback,type,args…)：创建一个用于canvas元素图像文件的Blob，第一个参数是一个回调函数，浏览器会以一个指向blob的引用为参数，去调用该回调函数。第二个参数是图像类型，默认是image/png。最后一个参数是从0到1之间，表示图像的质量。

canvas元素只是为了充当绘图环境对象的容器而存在的，该环境对象提供了全部的绘图功能。常见的绘图环境就是2d绘图环境和3d绘图环境。

2d绘图环境

3d环境对象有一些属性，具体如下：

  1. canvas：指向绘图环境所属的canvas对象，该属性最常见的用途是通过它来获取canvas的高度和宽度，分别调用canvas.width和canvas.height；
  2. fillstyle：图形填充操作，比如颜色、渐变色或者图案
  3. font：当绘图调用fillText或者strokeText的时候，所用的字型
  4. globalAlpha：全局透明设定，它可以取0到1之间，
  5. lineCap：绘制线段的端点
  6. lineWidth：线段的宽度
  7. lineJoin：线段相交的时候，如何绘制焦点，可取值：bevel、round、miter。默认是miter
  8. miterLimit：如何绘制焦点
  9. shadowBlur：延伸阴影效果，值越高，阴影效果越远
  10. shadowColor： 阴影颜色
  11. shadowOffsetX、shadowOffsetY：阴影效果的偏移量
  12. strokeStyle：绘制路径的风格

这就是canvas常见的几个知识点，后面的案例中会一一介绍。