什么是Canvas
canvas是HTML5提供放入一个用于展示绘图效果的标签。
基本用法
基本语法：
<canvas></canvas>
1、使用Canvas标签，即可在页面中开辟一格区域，可以设置其width和height设置该区域的尺寸。
2、默认宽高为300和150
3、如果浏览器不支持canvas标签，那么会将其解释为div标签。因此常常在canvas中嵌入文本，以提示用户浏览器的能力。
4、canvas的兼容性非常强，只要支持该标签的，基本功能都一样，因此不用考虑兼容性问题。
5、canvas本身不能绘图，是使用JavaScript来完成绘图。canvas对象提供了各种绘图用的api
6、不要使用css来设置狂爱，会有拉伸的问题，应该直接用属性设置
基本绘图方法：
1、获得 canvas 对象
2、调用 getContext 方法，提供字符串参数 '2d'
3、该方法返回 CanvasRenderingContext2D 类型的对象，该对象提供基本的绘图命令，使用这些命令进行糊涂。
方法与实例
moveTo
语法：
CanvasRenderingContext2D.moveTo( x, y )
描述：该方法用于设置绘制起点。其中参数 x,y 表示在坐标系中的位置。
lineTo
语法：
CanvasRenderingContext2D.lineTo( x, y )
描述：用于设置需要绘制直线的另一个点。最终描边后会连线当前点和方法参数描述的点。
stroke
语法：
CanvasRenderingContext2D.stroke()
描述：用于连线。将描述的所有点按照指定顺序连接起来。
例如：绘制基本线