本文共 6112 字，大约阅读时间需要 20 分钟。

一、数据可视化

1.概念

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

2.常见使用场景

(1)媒体大屏

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

3.数据可视化工具

3.1绘图容器

canvas svg

3.2绘图工具

d3.js echarts

二.Canvas绘图容器

1.什么是Canvas？

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

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其属性和方法。

注释：Internet Explorer 8 以及更早的版本不支持 元素。

2.应用场景

绘制图形，小游戏

3.Canvas和SVG的区别

Canvas

(1)依赖分辨率 (2)不支持事件处理器 (3)弱的文本渲染能力 (4)能够以 .png 或 .jpg 格式保存结果图像 SVG (1)不依赖分辨率 (2)支持事件处理器 (3)最适合带有大型渲染区域的应用程序（比如谷歌地图） (4)不适合游戏应用

4.初识Canvas标签和Canvas对象

4.1canvas标签

   		
   
    			您的浏览器不支持，请升级您的浏览器		
   

4.2canvas 上下文对象

getConText()

​ 绘制图形的方法和属性

5.认识线条

5.1画布栅格及坐标空间

(1)canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。

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

5.2线条相关属性及方法

moveTo(x,y)把路径移动到画布中的指定点，不创建线条lineTo(x,y)添加一个新点,绘制一条从当前位置到指定新点(x,y)位置的直线。strokeStyle设置或返回描边颜色fillStyle设置或返回填充颜色lineWidth设置或返回当前的线条宽度lineJoin设置或返回两条线相交时，所创建的拐角类型lineCap设置或返回线条的结束端点样式

5.3描边与填充

stroke()	描边已定义绘图（路径）fill()	填充当前绘图（路径）

代码案例

// 3.绘制线条        // 1）绘制路径        ctx.moveTo(50,50)         ctx.lineTo(150,50)        ctx.lineTo(150,150)        // 1)修改线条颜色 宽度等样式        // 描边颜色        ctx.strokeStyle = "#007AFF"        // 线宽        ctx.lineWidth = "10"        // 填充颜色        ctx.fillStyle = "#00BB00"        // 相交拐角样式   默认值 尖角        ctx.lineJoin = "miter"        // 圆角         ctx.lineJoin = "round"        // 斜角        ctx.lineJoin = "bevel"        // 2）绘制        // 描边        ctx.stroke()        // 填充        ctx.fill()

5.4绘制路径

beginPath()	新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。生成路径的第一步叫做beginPath()。closePath()	闭合路径之后图形绘制命令又重新指向到上下文中。不是必需的。

代码案例

// beginPath 开启新的路径    ctx.beginPath()    ctx.moveTo(50,50)    ctx.lineTo(150,50)    ctx.lineWidth = "20"				    ctx.stroke()    // 开辟了新的空间    ctx.beginPath()    ctx.moveTo(50,150)    ctx.lineTo(150,150)    ctx.lineWidth = "20"    // 线条两端的样式  默认值    ctx.lineCap="butt"    // 矩形--长度变长了    ctx.lineCap="square"    // 圆角--长度变长了    ctx.lineCap="round"    ctx.stroke()

// 2）绘制三角形        ctx.moveTo(50,50) //起点        ctx.lineTo(150,50)//过程        // ....        ctx.lineTo(150,150)//当前点        // ctx.lineTo(50,50)        // 当前点回到起点        ctx.closePath()        ctx.lineWidth="10"				        // 绘制        ctx.stroke()

6.绘制矩形

1.rect(x, y, width, height)	将一个矩形路径增加到当前路径上,绘制一个左上角坐标为（x,y）,宽高为width以及height的矩形。需要配合	fill()或者stroke()使用	2.fillRect(x, y, width, height)	 绘制一个填充的矩形3.strokeRect(x, y, width, height)	绘制一个矩形的边框	4.clearRect(x, y, width, height)	清除指定矩形区域，让清除部分完全透明。

代码案例

// 绘制矩形  rect(x, y, width, height)    // ctx.rect(50,50,200,100)    // ctx.stroke()    ctx.strokeStyle="#006699"    ctx.strokeRect(50,50,200,100)    setTimeout(()=>{           // 清除指定区域内的图形        ctx.clearRect(0,0,300,300)        ctx.strokeRect(70,70,200,100)    },1000)    // ctx.fillStyle="#00BB00"    // ctx.fillRect(50,200,200,100)

7.绘制文本

font 文本内容的当前字体属性textAlign 文本内容的当前对齐方式fillText()在画布上绘制“被填充的”文本strokeText()在画布上绘制文本（无填充）

代码案例

// 绘制文字 		//指定坐标的下边界坐标  文字绘制在指定坐标上边绘制    ctx.font = "40px 黑体"    ctx.textAlign="right"    ctx.fillText("hello world",100,100)    ctx.strokeText("hello world",100,200)

8、绘制圆形、弧形、扇形

arc(x,y,r,sAngle,eAngle,counterclockwise);	画一个以（x,y）为圆心的以r为半径的圆弧（圆），从sAngle开始到eAngle结束，按照counterclockwise给定的方向（默认为顺时针）生成，true代表逆时针，false代表顺时针。

代码案例

// 1.圆 arc(x,y,r,sAngle,eAngle,counterclockwise);    /*            1.弧度计算公式  弧度=角度/180*Math.PI           2. 0度 三点钟方向           3.默认值 false 顺时针        */    // ctx.arc(200,200,100,0/180*Math.PI,360/180*Math.PI,false)    // ctx.stroke()    // 绘制弧度    // ctx.arc(200,200,100,0/180*Math.PI,90/180*Math.PI,true)    // ctx.stroke()    // 绘制扇形    ctx.moveTo(200,200)    ctx.arc(200,200,100,0/180*Math.PI,90/180*Math.PI,false)    ctx.closePath()    ctx.stroke()    ctx.fill()

9.太极图案例

代码案例

			
   								
   		
   
    			您的浏览器不支持，请升级您的浏览器		
   					

11.绘制阴影

shadowColor     阴影颜色shadowOffsetX   X轴偏移shadowBlur      模糊度shadowOffsetY   Y轴偏移

代码案例

ctx.fillStyle="pink"    ctx.shadowColor="#007AFF"    ctx.shadowOffsetX="-20"    ctx.shadowOffsetY="20"    ctx.shadowBlur="3"    ctx.fillRect(50,50,200,100)

12.绘制图像

drawImage() 方法在画布上绘制图像三个参数：context.drawImage(img,x,y);五个参数：context.drawImage(img,x,y,width,height);九个参数：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

人物代码案例

			
   								
   		
   
    			您的浏览器不支持，请升级您的浏览器		
   					

13.canvas渐变(了解)

13.1什么是渐变？

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

13.2渐变的使用场景

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

13.3createLinearGradient 线性渐变

代码案例

// 1，创建渐变 createLinearGradient(起始位置的x，y  结束位置x，y)    // 坐标 相对于画布左上角进行定位    // let lg = ctx.createLinearGradient(50,50,200,50) //x轴发生变化 水平的渐变    // let lg = ctx.createLinearGradient(50,50,50,150) //y轴发生变化 垂直的渐变    let lg = ctx.createLinearGradient(0,0,200,150) 	   // x y轴发生变化 倾斜的渐变    // 2.渐变添加颜色节点 至少两种颜色    lg.addColorStop(0,"#f00")    lg.addColorStop(0.5,"#00f")    lg.addColorStop(1,"#5f2")    // 3.使用渐变颜色    ctx.fillStyle = lg    ctx.fillRect(50,50,150,100)

13.4 createRadialGradient 放射性渐变

代码案例

// 1，创建渐变    // 坐标 相对于画布左上角进行定位    // let rg = ctx.createRadialGradient(200,200,50,200,200,150)    // let rg = ctx.createRadialGradient(180,180,50,200,200,150)    let rg = ctx.createRadialGradient(200,200,50,180,180,150)    // 2.渐变添加颜色节点 至少两种颜色    rg.addColorStop(0,"#f00")    // lg.addColorStop(0.5,"#00f")    rg.addColorStop(1,"#5f2")    // 3.使用渐变颜色    ctx.fillStyle = rg    ctx.arc(200,200,150,0,2*Math.PI,false)    ctx.fill()

14.canvas 变形

参考css

1.旋转 rotate(弧度）2.缩放 scale(x, y)3.移动 translate(x, y) 坐标原点4.Canvas状态	save()	保存画布(canvas)的所有状态			restore()	恢复 canvas 状态

代码案例

// 旋转    // ctx.rotate(30/180*Math.PI)    // 缩放    // ctx.scale(0.5,0.5)    // 平移 坐标原点的位置  左上角 0,0	//ctx.translate(100,100)    // 保存之前的环境    ctx.save()    ctx.translate(100,100)    ctx.fillStyle="coral"    ctx.fillRect(50,50,200,100)    // ctx.strokeRect(-100,-100,100,50)    //恢复之前保存的环境--坐标轴    ctx.restore()    ctx.strokeRect(0,0,100,50)

15.钟表案例

代码案例

			
   								
   		
   
    			您的浏览器不支持，请升级您的浏览器