了解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、这个对象调用相应的方法，画线或着色。

小例子：

 <canvas id="cav" width="400" height="400"></canvas>
<script>
    var cav=document.querySelector("#cav")
    var cxt=cav.getContext("2d")
    cxt.moveTo(200,200)//确定线段起点
    cxt.lineTo(300,300)//将上面定义的线段起点和这里指定的新的点连接起来
    cxt.moveTo(300,300)
    cxt.lineTo(400,200)
    cxt.strokeStyle="yellow" //改变线段颜色
    cxt.lineWidth=10 //改变线段粗细
    cxt.stroke() //绘制图片
</script>

页面效果：

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

canvas适用于哪些场景？

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