03《跟月影学可视化》学习笔记@初看Canvas画布宽高：Canvas元素上的width和height属性。样式宽高：

Canvas 绘制基本几何图形

一、Canvas 元素和 2D 上下文

画布宽高：Canvas元素上的width和height属性。
```
<canvas width="512" height="512"></canvas>
```
样式宽高：Canvas元素的CSS样式属性。
```
canvas {
  width: 256px;
  height: 256px;
}
```
画布宽高缺省，等同于样式宽高。
画布宽高决定了可视区域的坐标范围。

Canvas 将画布宽高和样式宽高分开：更方便适配不同的显示设备。

二、Canvas 的坐标系

类似浏览器窗口的坐标系：默认左上角为坐标原点，x 轴水平向右，y 轴垂直向下。

旋转或三维对应左手系。

三、Canvas 绘制几何图形

获取 Canvas 上下文

// 通过DOM API获取Canvas元素
const canvas = document.querySelector('canvas');
// 通过getContext方法拿到Canvas上下文
const context = canvas.getContext('2d');

用 Canvas 上下文绘制图形

设置状态的 API，可以设置或改变当前的绘图状态。如：颜色、线宽、坐标变换等。

绘制指令 API，用来绘制不同形状的几何图形。

// 在Canvas中心点绘制一个100*100的正方形
const rectSize = [100, 100];
context.fillStyle = 'red';
context.beginPath();
context.rect((canvas.width - rectSize[0])/2, canvas.height - rectSize[1]/2, 100, 100);
context.fill();

将图形绘制到画布中心的方法

改变要绘制的图形顶点的坐标；

多顶点图形在绘制前需要计算出每个顶点的位置，很麻烦。
通过 translate 平移。

只需要获取中心点与左上角的偏移。
但是在绘制后续其他图形前，需要将画布的状态恢复回来再绘制。

恢复画布状态的方法

反向平移恢复法

// 平移
context.translate(-rectSize[0]/2, -rectSize[1]/2);

// 恢复
context.translate(rectSize[0]/2, rectSize[1]/2);

restore 指令法

// 暂存状态
context.save();
// 平移
context.translate(-rectSize[0]/2, -rectSize[1]/2);

// ...

// 恢复
context.restore();

Canvas 矩形绘制的5步走

通过 getContext 获取 Canvas 对象；
通过 fillStyle, translate 等设置绘图状态；
调用 beginPath 指令开始绘制矩形；
调用绘图指令（Canvas MDN 官方文档）；

rect 绘制矩形
lineTo 绘制直线、多边形
arc 绘制弧线、圆、椭圆、扇形
quadraticCurveTo, bezierCurveTo 绘制贝塞尔曲线
调用 fill 指令，将绘制内容真正输出到画布上。

四、Canvas 绘制层次关系图

将层次结构数据（Hierarchy Data）与绘图指令建立映射关系，即把 JSON 数据转换成图形信息。

处理数据

数据转换工具库 d3-hierarchy
遍历数据
绘制图形

tips Canvas 绘制动态图形
通过 clearRect 指令，将之前的图形擦除，再把新的图形绘制上去。

五、Canvas 的优缺点

优点：简单易操作，高效的渲染能力。

Canvas 是一个非常简单易用的图形系统，可以便捷地绘制出各种复杂地几何图形。
Canvas 更偏向渲染层，能够提供底层地图形渲染 API高性能地完成渲染。
缺点：内部图形元素不便于控制。

Canvas 在 HTML 上是一个独立的画布元素，绘制出来的图形对于浏览器来说只是 Canvas 中一个个像素点，很难直接抽取其中的图形进行操作。