数据可视化Data Visualization:就是指将结构或非结构数据转换成适当的可视化图表，然后将隐藏在数据中的信息直接展现于人们面前。

数据报表 特效制作 游戏开发 大屏展示

大屏展示目前在web前端开发中占比比较多，使用场景如下：

适合展会、媒体访问等公众场合，是企业形象、品牌展示的窗口； 适用企业内部宣传专区，用于接待来访领导、客户或投资。 针对企业运营或运维监控需求，比较适用内部指挥监控等； 滴滴出行大数据、天猫双十一交易数据、茅台数博会大屏等;

3.1绘图容器(画布)

3.2绘图工具（插件）

(1)依赖分辨率,都是标量图形 (2)不支持事件处理器(不能绑定事件) (3)弱的文本渲染能力，适合游戏开发（微信小游戏） (1)不依赖分辨率，矢量图形 (3)最适合带有大型渲染区域的应用程序（比如谷歌地图） 百度商业前端数据可视化团队研发的图表库,免费开源，国内用户偏多。可以使用canvas和svg绘制图形 highcharts是国外的一家公司开发的图表库，主要采用svg画图。 D3通过svg来绘制图形，偏底层，太底层，学习成本大。

Canvas标签用于绘制图形的 HTML 元素,canvas元素本身并没有绘制能力,它仅仅是图形的容器,通常通过JavaScript脚本进行绘制。canvas最早由Apple引入WebKit，用于MacOSX的Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。

canvas默认大小是300(宽)*150（高），单位是px;不要使用style样式的方式设置其大小否则会导致变化内部图形变形，使用起内部的width和height属性来设置其大小；canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。

栅格的起点为左上角[坐标为(0,0)]所有元素的位置都相对于原点定位。

因为canvas本身不具备绘图能力，所以需要其内部的2d画笔对象来完成图形绘制，也就是canvas上下文对象，后面我们可以称其为画笔；

// 获取canvas上下文对象（画笔） alert('暂不支持请更换浏览器')

1.线条相关属性及方法

moveTo(x,y) 把路径移动到画布中的指定点，不创建线条。
lineTo(x,y) 添加一个新点,绘制一条从当前位置到指定新点(x,y)位置的直线。
stroke() 描边已定义绘图（路径）
fill() 填充当前绘图（路径）
lineWidth 设置或返回当前的线条宽度
lineJoin设置或返回两条线相交时，所创建的拐角类型 //bevel:创建斜角 round:创建圆角。
 

 // 1.绘制一条直线
 
 
 // 2.绘制两条垂直相交线段
 
 
 // 3.绘制描边矩形
 
 // 4.绘制填充矩形
 

 

 ctx.rotate(旋转的弧度) 是相对于画布的起点进行旋转
 
 
 // 执行旋转30度 转换成弧度
 
 // 再次绘制红色矩形
 

 

 
 
 
 // 再次绘制红色矩形

beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成新路径。可以防止后面绘制的图形样式作用域前面已经绘制的图形。如果不使用此方法，那么绘制的所有图形都将在一条路径上。
closePath() 作用是闭合路径，将当前路径上的起点和结束位置进行闭合连接，一般用于闭合多边形，不是结束路径，不是必需的，和beginpath()没有任何关系；

 

 
 
 
 // 1.绘制一个整圆
 
 // 2.绘制右半圆（顺时针）
 
 // 3.绘制左半圆（逆时针）
 
 // 4.绘制右侧1/4扇形（顺时针）
 

 
 
 

 
 

 // 绘制一条水平参考线
 
 
 

 
 // // 赋值图片资源路径
 // // 将图片绘制到画布上(当图片资源加载成功后)
 
 

渐变是一种有规律性的变化,渐变色是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩。

处理图表、处理文字、处理图片、用做背景；

 线性渐变开始位置： x1,y1 结束位置：x2,y2，渐变位置坐标点相对于画布而言的
 
 第一个参数：渐变的开始位置 ，表示渐变的开始点和结束点之间的一部分。offset 为 0 对应开始点，offset 为 1 对应结束点
 第二个参数是渐变的颜色

ctx.scale(x,y) 增减图形在 canvas 中的像素数目，scale方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子；

默认情况下，canvas 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。

// 再次绘制红色矩形 // `scale`方法接受两个参数。`x,y` 分别是横轴和纵轴的缩放因子； // 再次绘制同样大小矩形 // 再次绘制同样大小矩形 起点（100,100） // 再次绘制同样大小矩形 起点（0,0）