可下载 github/data-view 相关代码来辅助了解。
canvas 可以绘制复杂图形，处理图像，做动画，开发游戏，处理视频...
比如：我们平常用div+css 只能做一些简单的图形，如：正方形，长方形，圆，椭圆...... 但是用canvas 可以制作，三角形、多边形，花瓣......
在 MDN 中是这样定义 <canvas> 的：
<canvas>是 HTML5 新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。例如，它可以用于绘制图形、制作照片、创建动画，甚至可以进行实时视频处理或渲染。
这里需要划重点的是，<canvas> 只是一个画布，本身并不具有绘图的能力，绘图必须使用 JavaScript 等脚本语言。
<canvas> 标签允许脚本语言动态渲染位图像。<canvas> 标签创建出了一个可绘制区域，JavaScript 代码可以通过一套完整的绘图功能类似于其他通用二维的 API 访问该区域，从而生成动态的图形。
我们可以认为 <canvas> 标签只是一个矩形的画布。JavaScript 就是画笔，负责在画布上画画。
广义上：就是 H5 新增的canvas 2d绘图功能
在html中：canvas 是html标签（具有标签属性了）；canvas可以理解为一张画布；用js 在canvas 里绘制图形。
设置 canvas dom元素的 width、height 属性
#canvas{
background-color: aliceblue;
}<canvas id="canvas" width="300" height="500"></canvas> // 画布
const canvas= document.getElementById("canvas");
canvas.width = 200;
canvas.height = 100;上处这些代码就可以看到一个画布了，并设置了其尺寸大小。
获取上下文对象的方法：canvas.getContext('2d')
// 画笔
const ctx = canvas.getContext('2d')
ctx.fillRect(100,200,300,400) // x,y,w,h矩形的绘制方法：
- 填充矩形方法：fillRect(x,y,w,h)
- 描边矩形方法：stokeRect(x,y,w,h)
- 清理矩形方法：clearRect(x,y,w,h)
// 填充矩形
ctx.fillRect(100,100,100,100) // x,y,w,h
// 颜色
ctx.strokeStyle = 'red'
// 线宽
ctx.lineWidth = 5
// 描边矩形
ctx.strokeRect(100,100,100,100)
// 清理矩形
ctx.clearRect(100,100,100,100)
// 清理画布
ctx.clearRect(0,0,canvas.width,canvas.height)绘制路径步骤：
1、开始建立路径：beginPath() 2、向路径集合中添加子路径。 3、显示路径：填充fill(); 描边stroke()
子路径的形状：
- 直线：lineTo(x,y); lineTo(x,y); lineTo(x,y)
- 圆弧：arc(x,y,半径,开始弧度,结束弧度,方向)
- 切线圆弧：arcTo(x1,y1,x2,y2,半径)
- 二次贝塞尔曲线：quadraticCurveTo(x1, y1, x, y); （从上一点开始绘制一条二次曲线，到(x, y)为止，并且以(x1, y1)作为控制点）
- 三次贝塞尔曲线：bezierCurveTo(x1, y1, x2, y2, x, y) （从上一个点开始绘制一条曲线，到(x, y)为止，并且以(x1, y1)和(x2, y2)为控制点） * 矩形：rect(x,y,w.h)
图形的着色区域有两种：
1、描边区域：strokeStyle 2、填充区域：fillStyle
文本的绘制方法有两种：
1、描边文字：strokeText(text,x,y,maxWidth) 2、填充文字：fillText(text,x,y,maxWidth)
获取文字的宽度方法：measureText(text)
设置font字体：ctx.font = 'bold 20px serif' // 粗细、大小、字体
textAlign 水平对齐 // start left end right center
Textbaseline 垂直对齐 // top middle bottom hanging(悬挂基线对齐) ideographic(表意基线对齐)
状态管理，管理的是上下文对象的状态。
上下文对象的状态就是上下文对象的属性。比如：秒变颜色，填充颜色，投影，线条样式...
管理上下文状态的方法有两个：
- 保存当前状态：save()
- 恢复上一次保存的状态：restore()
绘制具备同一种样式的图形时，都会save()，restore() 将其包裹起来，这是为了避免当前的图形样式影响后边要绘制的图形样式。
canvas 图形没有监听事件的方法。
比如用鼠标选择图形时，只能用canvas画布监听事件，获取鼠标或触摸点在canvas中的位置，再基于图形再canvas中的位置和形状，判断鼠标在canvas中的点位是否在图形中。
扇形选择必备条件：
- 圆心位置：center
- 半径：radius
- 起始弧度：startAngle
- 结束弧度：endAngl
饼图主要用于展现不同数据在总数中的占比。
扇形的弧长表示该类别的占比大小，也就是多个扇形组成了饼图。
饼图的核心内容：
- 扇形
- 引导线+标签文字
- 提示框
- 鼠标划入划出的事件
已知： *以圆心pos为起点，做一条射线将扇形均分，点p1在这条射线上。 *p1到圆心的距离比半径长20 求：点p1 的位置 x, y 定理：根据向量的方向和长度，可求点位 解： 方向 = (结束弧度-起始弧度)/2+起始弧度 长度 = 半径+20 x = Math.cos(方向)*长度 + pos.x y = Math.sin(方向)*长度 + pos.y
哈哈，大家还记得三角函数公式吗？！
饼图动画：
- 弹性动画
- 缓动跟随
制作动画的业务逻辑：
1、初始状态0：扇形由小变大，弹性运动 2、鼠标划入1：扇形扩大一点，弹性运动；提示缓动跟随 3、鼠标划出2：扇形缩小一点，弹性运动；提示隐藏
二分法就是一分为二的方法。
绘制饼图步骤：
1、声明必备数据 2、构建数据 3、基于数据绘图 4、鼠标交互
其实 canvas 精彩的地方就在于 程序算法 和 艺术 的结合。也就是说它可以用逻辑算法来展示艺术中美的规律。
喜欢、感兴趣的小伙伴 可以深入研究canvas，It's amazing ！应用场景广泛：绘制图表（ECharts）、小游戏（H5游戏）、活动页面（转盘、刮刮乐）、小特效、炫酷背景.....
一个基于 JavaScript 的开源可视化图表库，关于echarts的功能和特性可以移步官网了解
官网也有快速入门等教程文档帮助我们使用echarts。
echarts 常用组件：
- 标题 title
- 图例 legend
- 工具栏 toolbox
- 提示框 tooltip
- 坐标轴 xAxis yAxis
- 系列列表 series
echarts 常用图表：
- 折线图 line
- 柱状图 bar
- 饼图 pie
- 散点图 scatter
- k线图 candlestick
- 雷达 radar
- 仪表盘 gauge
dataset数据集组件是从echarts4开始有的，用于数据管理。
dataset的优点：
- 基于原始数据，设置映射关系，形成图表
- 数据和配置分离，便于单独管理
- 数据可以被多个系列或者组件复用
- 支持更多的数据的常用格式，例如二维数组、对象数组等
- 第1列映射类目轴
- 第2列第1个系列
- 第3列第2个系列
- ...
// 指定图表的配置项和数据
const option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
['product', '2015', '2016', '2017'],
['Latte', 43.3, 85.8, 93.7],
['Tea', 83.1, 73.4, 55.1],
['Cocoa', 86.4, 65.2, 82.5],
['Brownie', 72.4, 53.9, 39.1]
]
},
// X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: {type: 'category'},
// Y 轴，数值轴。
yAxis: {},
// 多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};或者也可以使用常见的对象数组的格式：
// 指定图表的配置项和数据
const option = {
legend: {},
tooltip: {},
dataset: {
// 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
// 如果不指定 dimensions，也可以通过指定 series.encode 完成映射
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};基于列映射:
serieslayoutBy: colum,
// x轴 就是 Latte、Tea、Cocoa、Brownie
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Latte', 43.3, 85.8, 93.7],
['Tea', 83.1, 73.4, 55.1],
['Cocoa', 86.4, 65.2, 82.5],
['Brownie', 72.4, 53.9, 39.1]
]
},基于行映射：
serieslayoutBy: row,
// x轴 就是 '2015', '2016', '2017'
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Latte', 43.3, 85.8, 93.7],
['Tea', 83.1, 73.4, 55.1],
['Cocoa', 86.4, 65.2, 82.5],
['Brownie', 72.4, 53.9, 39.1]
]
},echarts 的样式设置方法有以下几种：
- 颜色主题 （theme）
- 调色盘（color）
- 具体样式设置（itemStyle、lineStyle、areaStyle、label...）
- 视觉映射（visualMap）
颜色主题就是修改全局样式的方法。
echarts 内置了两套主题，分别为 light 和 dark，其设置方法为：
echarts.init(dom, 'light’)若要使用其它主题，需要去主题下载。
大屏通俗的讲就是显示在大屏幕的网页，我们做数据可视化的，对于我们来说也是常见的。
大屏通常放在公共空间中、或者显眼的地方展示数据。
大屏的尺寸设计一般是 1920*1080，可以不用考虑浏览器的兼容性，只要谷歌浏览器能兼容就行。
大屏的制作原理是在页面中，建立多个echarts 容器，将不同的echarts 图表放入其中。
大屏在自适应屏幕时要考虑两个方面：
1、echarts 容器对屏幕尺寸的自适应。
- css 基础知识，如flex布局、百分比定位等……
2、echarts 图表对容器尺寸的自适应。
- 图表元素百分比定位，如left:‘20%’
- 使用echarts的media 功能进行响应式布局。
注：echarts 实例的 resize() 方法，可以在在容器大小发生改变时，改变图表尺寸。
