canvas是html5新增的一个重要标记，当添加canvas标记后，系统会默认生成一个宽300像素，高150像素的画布，可以在上面绘制各种图形。绘制成的图片认为是一张图片，可以保存。
getElementById():获取指定ID值的对象，（获取界面上的画布）
getContext():根据上下文指定绘图环境
beiginpath():重新开始新的路径，把之前的路径都清理掉
strokeRect():绘制没有填充颜色的矩形
fillRect():绘制没有边框的矩形
绘图样式style主要分为两种：
strokestyle线条样式，为边框填充颜色，默认情况为黑色
fillstyle填充样式，对图形的内部填充颜色，默认情况为黑色
线型属性主要有三个：
Linewidth：设置当前绘线的粗细，必须为正数，默认值为1.0
lineCap:设置端点显示的样子，属性值有butt(默认值）,round,square
lineJoin:两条线交汇时，连接处所显示的样子，属性值有round，bevel，miter(默认值)，
1.绘制矩形
rect（x,y,w,h）分别表示横坐标，纵坐标，宽，高
2.绘制直线
moveTo(x,y):将光标移动到指定坐标点，以这个点为起点
lineTo(x,y):上一个坐标点与此参数点之间绘制直线
closePath（）：当前点与起始点之间绘制一条路径，使之称为封闭图形。
3.绘制曲线
绘制三次曲线:bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
绘制二次曲线：quadraticCurveTo(cp1x,cp1y,x,y)
4.绘制圆形
5.绘制变形图形
平移，缩放，旋转