了解canvas

网页中的两种绘图技术：1、SVG矢量图  2、canvas

SVG矢量图:就是用一个标签代码来画图

canvas ：画布，h5新出的技术，用js来画图

它们都是代码，占用很小的内存；但是img是图片，是图片编码。

注意：画布的宽度和高度要用canvas的属性设置，不要直接在css里面定义；

canvas本身没有任何外观，只是在文档中创建了一个画板。

画布的坐标：画布以浏览器可视区域左上角(0, 0)为坐标原点；往右为X轴的坐标不断增大； 往下为Y轴的坐标不断增大。

canvas如何作图？

1、写一个canvas标签

2、获取创建的canvas元素

3、canvas点getContext("2d")得到一个“绘制上下文”对象

4、这个对象调用相应的方法，画线或着色。

小例子：

页面效果：

需要补充一点： 关于lineTo()这个方法，是将moveTo()设置的起点与当前lineTo的点连接起来；但是当没有设置moveTo()时，lineTo()会将上条线段的终点当作起点，如果没有上一次的终点，就没有这一次的起点。

canvas适用于哪些场景？

双屏互动   大数据页面   游戏   广告   特效.......