这是我参与「第五届青训营 」笔记创作活动的第14天
什么是数据可视化？ 基本概念
::: tip 数据可视化，是关于数据视觉表现形式的科学技术研究 :::
这个概念向我们传达了两个信息：
数据可视化是一门学科 数据可视化与数据和视觉有关 数据可视化简单理解，就是将数据转换成易于人员辨识和理解的视觉表现形式，如各种 2D 图表、3D 图表、地图、矢量图等等，随着技术的不断进步，数据可视化的边界也在不断扩大
数据可视化的发展历史 起源 数据可视化起源于 20 世纪 60 年代诞生的计算机图形学
::: tip 计算机图形学(Computer Graphics，简称CG)是一种使用数学算法将二维或三维图形转化为计算机显示器的栅格形式的科学 :::
计算机图形学广泛应用于各个领域，深刻影响和改变着我们的生活。
数据可视化发展前景
发展趋势
-
逐步成为前端工程师的标准技能
-
具备可大大增长自身的竞争力
-
未来具有广阔的发展前景
数据可视化解决方案
前端数据可视化解决方案如下： Skia Skia 是 Chrome 和 Android 的底层 2D 绘图引擎，具体可参考百度百科，Skia 采用 C++ 编程，由于它位于浏览器的更底层，所以我们平常接触较少
对底层绘图感兴趣的同学可以从这个案例入手，了解一下 C++ 的可视化编程。
OpenGL OpenGL（Open Graphics Library）是2D、3D图形渲染库，它可以绘制从简单的2D图形到复杂的3D景象。OpenGL 常用于 CAD、VR、数据可视化和游戏等众多领域。
Chrome Chrome 使用 Skia 作为绘图引擎，向上层开放了 canvas、svg、WebGL、HTML 等绘图能力。
二、canvas canvas 是 HTML5 的新特性，它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图像。
canvas标签 标签只是图形容器，相当于一个画布，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，相当于使用画笔在画布上画画。
注意：必须指定宽高
1 getContext() context 是一个封装了很多绘图功能的对象，我们在页面中创建一个 canvas 标签之后，首先要使用 getContext() 获取 canvas 的上下文环境，目前 getContext() 的参数只有 2d，暂时还不支持 3d
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
const canvas = document.getElementById('charts'); const context = canvas.getContext('2d');//--->画笔 1 2 绘制线段 moveTo(x, y)：把路径移动到画布中的指定点，不创建线条 lineTo(x, y)：添加一个新点，然后在画布中创建从该点到最后指定点的线条 context.strokeStyle = 'yellowgreen'; context.moveTo(0, 0); context.lineTo(100, 100); context.stroke(); 1 2 3 4 绘制矩形 fillRect(x, y, width, height) 绘制填充颜色的矩形 strokeRect(x, y, width, height) 绘制线条的矩形 context.fillStyle = "pink"; context.strokeStyle = "darkred"; context.fillRect(0, 0, 100, 100); context.strokeRect(120, 0, 100, 100); 1 2 3 4 绘制圆形 arc(x, y, radius, starAngle, endAngle, anticlockwise) x : 圆心的 x 坐标 y：圆心的 y 坐标 radius ： 半径 starAngle ：开始角度 endAngle：结束角度 anticlockwise ：是否逆时针（true）为逆时针，(false)为顺时针 context.beginPath(); context.arc(300, 350, 100, 0, Math.PI * 2, true); //不关闭路径路径会一直保留下去 context.closePath(); context.fillStyle = 'rgba(0,255,0,0.25)'; context.fill(); // 或 // context.stroke(); // 此时就会有问题 1 2 3 4 5 6 7 8 清除路径 清除绘画的路径，多个图形就不会连接在一起
context.beginPath() context.closePath() 1 2 清除矩形区域 当在一个画布反复绘制图形，需要将上一次的图形清空
clearRect(x, y, width, height) 绘制文字 fillText(text, x, y, maxWidth)
