1、Canvas本质上是一个画布，在它上面绘制的图形是不可以缩放的。此外，使用Canvas绘制出来的对象不属于页面DOM结构或者任何命名空间。
2、HTML5 <canvas>元素用于图形绘制，通过脚本（通常是JavaScript）来完成。 <canvas>标签只是图形容器，你必须使用脚本来绘制图形。
3、通过Canvas路径可以绘制任何形状。绘制形状时，先绘制轮廓，再绘制边框和填充。 创建自定义形状很简单，使用beginPath()开始绘制，这个函数不带任何参数，它用来通知Canvas将要开始绘制一个新的图形了，然后使用直线、曲线、和其他图形绘制图形。调用了beginPath之后，就可以使用context的各种方法来绘制想要的形状了。 例如：moveTo(x,y)—该函数不进行绘制，只是将当前位置移动到新的目标坐标（x,y）。 lineTo(x,y)该函数不仅将当前位置移动到新的目标坐标（x,y），而且在两个坐标之间画一条线。 绘制完毕后调用fill和stroke即可添加填充或着设置边框。 调用closePath()结束自定义图形绘制。closePath()函数的行为通lineTo很类似，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。
5、在HTML5 Canvas API中变换绘图方式，通过变换函数，可以对绘制的图形进行空间坐标的平移、缩放和旋转操作。在应用的时候可以被顺序应用、组合或者随意修改。 对于绘制图形进行变换操作，通常有3个方法可以调用:translate()、scale()和rotate() translate() 调用该方法，可以对绘制图形的空间坐标进行转换，例如绘制图形的起点坐标是（0,0），通过该方法可以将空间坐标转换为(100,100)。这样绘制的图形就进行了相应的平移 scale() 调用该方法，可以对绘制的图形沿着x、y坐标进行缩放。单位是浮点数。例如：。0.5 代表缩放50%。
rotate() 调用该方法，可以对绘制的图形进行旋转。单位是浮点数。
6、一般再绘制图形的时候，要绘制多个图形元素，那么变换操作可能只是对其中某一个元素进行操作。为了不影响后续的绘制过程。在变换前，应该调用save()方法把当前状态保存起来，变换操作完毕之后，再通过调用restore()方法，来重置之前的绘图状态。这样就不会影响后续的Canvas操作。
7、在Canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或修改图片等。并且图片通常会成为Canvas上的焦点。 在Canvas中插入图片时，需要调用drawImage()方法。
8、绘制文字
context上下文对象，可以设置一些text属性. font文字字体，同CSS font-family属性 textAlign文字水平对齐方式。可以取属性值：start默认、end、left、right、center 例如，文字水平对齐方式 textBaseLine 文字竖直对齐方式，可取值：top、hanging、middle、alphabetic、ideographic、bottom。默认值：alphabetical。 例如，文字集显对齐方式 有两个方法可以绘制文字： fillText(text,x,y,maxwidth)//填充文字 strokeText(text,x,y,maxwidth)//轮廓文字
9、在HTML5 Canvas中，除了可以绘制图形、填充颜色之外，同样可以向Photoshop软件中的渐变工具一样，绘制渐变对象。 要绘制渐变对象有两种方法(这两个方法同时可以应用与填充和线条): a、createLinearGradient() 该方法创建线性颜色渐变，它在指定的起始点和结束点之间线性的填充颜色 createLinearGradient(xStart,Ystart,xEnd,Yend); 起始点坐标 终止点坐标 b、 createRadialGradient() 该方法创建径向渐变，它再两个指定圆的圆周之间径向填充颜色 createRadialGradient(xStart,YStart,radiusStart,xEnd,yEnd,radiusEnd); 参数说明： 参数 功能说明 xStart,yStart 开始圆的圆心的坐标 radiusStart 开始圆的直径 xEnd,yEnd 结束圆的圆心的坐标 radiusEnd 结束圆的直径
