一、数据可视化
1数据可视化概述
数据可视化Data Visualization:就是指将结构或非结构数据转换成适当的可视化图表，然后将隐藏在数据中的信息直接展现于人们面前。
2应用场景
数据报表 特效制作 游戏开发 大屏展示
大屏展示目前在web前端开发中占比比较多，使用场景如下：
(1)媒体大屏
适合展会、媒体访问等公众场合，是企业形象、品牌展示的窗口；
(2)接待大屏
适用企业内部宣传专区，用于接待来访领导、客户或投资。
(3)监控大屏
针对企业运营或运维监控需求，比较适用内部指挥监控等；
(4)科技大屏
滴滴出行大数据、天猫双十一交易数据、茅台数博会大屏等;
3数据可视化工具
3.1绘图容器(画布)
canvas svg
3.2绘图工具（插件）
echarts highcharts charts d3 ucharts
4工具的区别
1.Canvas和SVG的区别 Canvas： (1)依赖分辨率,都是标量图形 (2)不支持事件处理器(不能绑定事件) (3)弱的文本渲染能力，适合游戏开发（微信小游戏） (4)能够以 .png 或 .jpg 格式保存结果图像 SVG： (1)不依赖分辨率，矢量图形 (2)支持事件处理器 (3)最适合带有大型渲染区域的应用程序（比如谷歌地图） (4)不适合游戏应用 2.Echarts.js、D3.js、Highcharts.js的区别 Echarts.js： 百度商业前端数据可视化团队研发的图表库,免费开源，国内用户偏多。可以使用canvas和svg绘制图形 Highcharts.js： highcharts是国外的一家公司开发的图表库，主要采用svg画图。 D3.js： D3通过svg来绘制图形，偏底层，太底层，学习成本大。 总结： Echarts类似于中国的WPS,而HightCharts类似于微软的office，D3更适合交互类图表。
二、认识Canvas
1Canvas概述
Canvas标签用于绘制图形的 HTML 元素,canvas元素本身并没有绘制能力,它仅仅是图形的容器,通常通过JavaScript脚本进行绘制。canvas最早由Apple引入WebKit，用于MacOSX的Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。
2应用场景
适合游戏应用
微信小游戏
数据可视化图形
各种图表
h5端特效
3canvas标签
1.画布大小
canvas默认大小是300(宽)*150（高），单位是px;不要使用style样式的方式设置其大小否则会导致变化内部图形变形，使用起内部的width和height属性来设置其大小；canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。
2.画布坐标
栅格的起点为左上角[坐标为(0,0)]所有元素的位置都相对于原点定位。
4canvas上下文对象
因为canvas本身不具备绘图能力，所以需要其内部的2d画笔对象来完成图形绘制，也就是canvas上下文对象，后面我们可以称其为画笔；
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
5浏览器支持性
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。 注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
6canvas兼容性处理
1.检查文本替换
<canvas id="canvas" width="500" height="500">暂不支持请更换浏览器!</canvas>
2.检查编程支持性
if(canvas.getContext){
// 获取canvas上下文对象（画笔）
let ctx = canvas.getContext('2d');
// console.log(ctx);
}else{
alert('暂不支持请更换浏览器')
}
三、绘制线段
1.线条相关属性及方法
moveTo(x,y) 把路径移动到画布中的指定点，不创建线条。 lineTo(x,y) 添加一个新点,绘制一条从当前位置到指定新点(x,y)位置的直线。 strokeStyle 设置或返回描边颜色 fillStyle 设置或返回填充颜色 stroke() 描边已定义绘图（路径） fill() 填充当前绘图（路径） lineWidth 设置或返回当前的线条宽度 lineJoin设置或返回两条线相交时，所创建的拐角类型 //bevel:创建斜角 round:创建圆角。 lineCap设置或返回线条的结束端点样式 //round：添加圆角 square:添加矩形 butt:默认
// 1.绘制一条直线 // ctx.moveTo(20,20);//设置起点 // ctx.lineTo(490,20);//设置下一个点并且连接上一个点 // ctx.lineWidth=20;//设置线段的宽度 // ctx.strokeStyle='red';//设置描边颜色 // ctx.lineCap='square';//设置线段两侧风格 // ctx.stroke();//设置描边 // ctx.fill();//填充线段（没有填充） // 2.绘制两条垂直相交线段 // ctx.moveTo(20,20); // ctx.lineTo(200,20); // ctx.lineTo(200,200); // ctx.lineWidth=20; // ctx.lineJoin='round';//设置拐进类型 // ctx.stroke(); // 3.绘制描边矩形 // ctx.moveTo(20,20); // ctx.lineTo(200,20); // ctx.lineTo(200,200); // ctx.lineTo(20,200); // ctx.lineTo(20,20); // ctx.stroke(); // 4.绘制填充矩形 // ctx.moveTo(20,20); // ctx.lineTo(200,20); // ctx.lineTo(200,200); // ctx.lineTo(20,200); // ctx.fillStyle='red';//设置填充颜色 // ctx.fill();//设置填充 // ctx.strokeStyle='green'; // ctx.lineWidth=10; // ctx.stroke();
2.绘制路径
beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成新路径。可以防止后面绘制的图形样式作用域前面已经绘制的图形。如果不使用此方法，那么绘制的所有图形都将在一条路径上。 closePath() 作用是闭合路径，将当前路径上的起点和结束位置进行闭合连接，一般用于闭合多边形，不是结束路径，不是必需的，和beginpath()没有任何关系；
// ctx.moveTo(20,20);
// ctx.lineTo(200,20);
// ctx.lineWidth=10;
// ctx.stroke();
// ctx.beginPath();//开启新的路径
// ctx.moveTo(20,50);
// ctx.lineTo(200,50);
// ctx.lineWidth=1;
// ctx.strokeStyle='red';
// ctx.stroke();
// ctx.moveTo(20,20);
// ctx.lineTo(200,20);
// ctx.lineTo(200,200);
// ctx.lineTo(20,200);
// ctx.lineTo(20,20);
// ctx.closePath();//闭合路径（将起点和重点连接闭合）
// ctx.stroke();
四、绘制图形
1绘制矩形
1.线段绘制 2.rect()方法 3.fillRect()直接填充绘制方法 4.strokeRect()直接描边绘制方法 5.clearRect()清除矩形大小
// 1.线段绘制法 // 2.rect()方法 // ctx.rect(100,100,100,100);//设置矩形的坐标和大小 // ctx.fill(); // ctx.strokeStyle='red'; // ctx.stroke(); // 3.fillRect()直接填充绘制方法 // ctx.fillStyle='red'; // ctx.fillRect(100,100,200,200); // 4.strokeRect()直接描边绘制方法 // ctx.lineWidth=10; // ctx.strokeStyle='red'; // ctx.strokeRect(100,100,200,200) // 5.clearRect()清除矩形大小 // ctx.fillRect(100,100,200,200); // ctx.clearRect(120,120,50,50);//擦除矩形大小空间 // ctx.clearRect(0,0,500,500);//擦除整个画布空间大小
2绘制圆形
ctx.arc(x,y,r,startAng,endAng,bool(默认是false:顺时针))
代码实例
// ctx.arc(x,y,r,startAng（开始弧度）,endAng（重点弧度）,bool(默认是false:顺时针)) // Math.PI == π == 180度对应的弧度 == 3.14 // console.log(Math.PI); // 0 0 // 90 Math.PI/2 // 180 Math.PI // 270 Math.PI*1.5 // 360 Math.PI * 2 // 每一度对应的弧度：Math.PI/180 // 1.绘制一个整圆 // ctx.arc(250,250,200,0,Math.PI*2); // ctx.stroke(); // 2.绘制右半圆（顺时针） // ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5); // ctx.closePath();//闭合路径（起点和终点弧度） // ctx.stroke(); // 3.绘制左半圆（逆时针） // ctx.arc(250,250,200,Math.PI*1.5,Math.PI*0.5,true); // ctx.closePath();//闭合路径（起点和终点弧度） // ctx.stroke(); // 4.绘制右侧1/4扇形（顺时针） // ctx.moveTo(250,250);//设置起点（圆的圆形坐标点） // ctx.arc(250,250,200,0,Math.PI*0.5); // ctx.closePath();//闭合路径（起点和终点弧度） // ctx.stroke();
五、绘制太极图
六、绘制文本
1.fillText() 填充文本 2.strokeText() 描边文本 3.ctx.textAlign 水平对齐 left center right 4.ctx.textBaseline 垂直基线对齐 middle top bottom
实例代码
// 绘制一条水平参考线
// ctx.moveTo(100,100)
// ctx.lineTo(400,100)
// ctx.stroke();
// 1.填充文本
// ctx.font='50px 黑体';//设置字体大小和类型
// ctx.textAlign='left';//水平对齐
// ctx.textBaseline='middle';//设置垂直对齐
// ctx.fillStyle='red';
// ctx.fillText('hello',100,100)//设置填充内容和坐标
// 2.填充文本
// ctx.font='50px 黑体';//设置字体大小和类型
// ctx.textAlign='left';//水平对齐
// ctx.textBaseline='middle';//设置垂直对齐
// ctx.strokeStyle='green';
// ctx.strokeText('world',300,100)//设置填充内容和坐标
七、绘制图像
drawImage() 方法在画布上绘制图像； 三个参数： context.drawImage(img,x,y); 五个参数： context.drawImage(img,x,y,width,height); 九个参数： context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
实例代码
// ctx.drawImage() 方法在画布上绘制图像；
// 获取图片对象
// let img = new Image();
// // 赋值图片资源路径
// img.src='./分帧/fz.jpg';
// // 将图片绘制到画布上(当图片资源加载成功后)
// img.οnlοad=()=>{
// ctx.drawImage(img,50,100,400,200);
// };
// 模拟分帧动画
// let img = new Image();
// let index = 1;
// setInterval(()=>{
// img.src='./分帧/fz'+index+'.png';
// index++;
// if(index >6)index=1;
// img.οnlοad=()=>{
// ctx.drawImage(img,50,100,400,200);
// }
// },50)
八、渐变
1渐变概述
渐变是一种有规律性的变化,渐变色是指某个物体的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩。 渐变需要两种以上颜色
2渐变的使用场景
处理图表、处理文字、处理图片、用做背景；
3线性渐变
createLinearGradient线性渐变。
1.获取线性渐变对象
let linear = cxt.createLinearGradient(x1,y1,x2,y2)
线性渐变开始位置： x1,y1 结束位置：x2,y2，渐变位置坐标点相对于画布而言的
2.创建渐变颜色
addColorStop(0-1,'css')
第一个参数：渐变的开始位置 ，表示渐变的开始点和结束点之间的一部分。offset 为 0 对应开始点，offset 为 1 对应结束点
第二个参数是渐变的颜色
代码案例
//1. 角形渐变 x1!=x2 y1!=y2 // let linear = ctx.createLinearGradient(0,0,200,200); // 水平渐变 x1!=x2 y1==y2 // let linear = ctx.createLinearGradient(0,0,200,0); // 垂直渐变 x1==x2 y1!=y2 // let linear = ctx.createLinearGradient(0,0,0,200); // linear.addColorStop(0.2,'red') // linear.addColorStop(0.5,'green') // linear.addColorStop(0.8,'orange') // linear.addColorStop(1,'blue') //2. 使用渐变 // ctx.fillStyle = linear; // ctx.fillRect(0,0,200,200)
4放射性渐变
createRadialGradient放射性渐变。 1.获取线性渐变对象 let radial = cxt.createRadialGradient(外x,外y,外r,内x,y,内r) 2.创建渐变颜色 radial.addColorStop()
代码案例
// let radial = ctx.createRadialGradient(250,250,200,200,200,10); // radial.addColorStop(0.2,'red') // radial.addColorStop(0.5,'green') // radial.addColorStop(0.8,'orange') // radial.addColorStop(1,'blue') // 使用径向渐变 // ctx.arc(250,250,200,0,Math.PI*2); // ctx.fillStyle=radial; // ctx.fill();
九、变形
1旋转rotate
ctx.rotate(旋转的弧度) 是相对于画布的起点进行旋转
// ctx.fillRect(100,100,100,100); // 执行旋转30度 转换成弧度 // ctx.rotate(Math.PI/180*30); // 再次绘制红色矩形 // ctx.beginPath(); // ctx.fillStyle='red'; // ctx.fillRect(100,100,100,100);
2移动translate
ctx.translate(x,y) 是将画布的起点进行位移
// ctx.fillRect(100,100,100,100); // 执行位移 // ctx.translate(100,100) // 再次绘制红色矩形 // ctx.beginPath(); // ctx.fillStyle='red'; // ctx.fillRect(100,100,100,100);
3.缩放scale
ctx.scale(x,y) 增减图形在 canvas 中的像素数目，scale方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子；
默认情况下，canvas 的 1 单位就是 1 个像素。举例说，如果我们设置缩放因子是 0.5，1 个单位就变成对应 0.5 个像素，这样绘制出来的形状就会是原先的一半。同理，设置为 2.0 时，1 个单位就对应变成了 2 像素，绘制的结果就是图形放大了 2 倍。
// ctx.fillRect(100,100,100,100); // 执行缩放 // ctx.scale(2,2) // 再次绘制红色矩形 // ctx.beginPath(); // ctx.fillStyle='red'; // ctx.fillRect(100,100,100,100);
// 增减图形在 `canvas` 中的像素数目， // `scale`方法接受两个参数。`x,y` 分别是横轴和纵轴的缩放因子； // 默认情况下，`canvas` 的 1 单位就是 1 个像素。 // ctx.fillRect(100,100,100,100); // 执行缩放 // ctx.scale(2,2); // 再次绘制同样大小矩形 // ctx.beginPath(); // ctx.fillStyle='red'; // ctx.fillRect(100,100,100,100)
4Canvas状态
ctx.save() ctx.restore()
// 起点(0,0) // ctx.fillRect(100,100,100,100); // 保存状态（0,0） // ctx.save(); // 执行位移 // ctx.translate(100,100); // 再次绘制同样大小矩形 起点（100,100） // ctx.beginPath(); // ctx.fillStyle='red'; // ctx.fillRect(100,100,100,100) // 回复状态 （0,0） // ctx.restore(); // 再次绘制同样大小矩形 起点（0,0） // ctx.beginPath(); // ctx.fillStyle='green'; // ctx.fillRect(100,100,50,50)
5变形transform
transform() 变形矩阵，该方法的行为相对于由 rotate()、scale()、translate() 完成的变换。
ctx.transform(1,0,0,1,0,0)
ctx.transform(a,b,c,d,e,f)
a:水平缩放,b:水平旋转(0,1),c:垂直旋转(0,-1),d:垂直缩放,e:水平移动,f:垂直移动
ctx.fillRect(100,100,100,100); // 执行位移 ctx.transform(1,-0.5,0.5,1,100,100); ctx.beginPath(); ctx.fillStyle='blue'; ctx.fillRect(100,100,100,100);