一、canvas的基本使用
绘制canvas图形大致可分为以下五个步骤：
1、获取 Canvas 对象，通过 getContext(‘2d’) 得到 2D 上下文；
2、设置绘图状态，比如填充颜色 fillStyle，平移变换 translate 等等；
3、调用 beginPath 指令开始绘制图形；
4、调用绘图指令，比如 rect，表示绘制矩形；
5、调用 fill 指令，将绘制内容真正输出到画布上。
<canvas width="500" height="500" id="canvas">
</canvas>
<script>
const canvas=document.getElementById('canvas');//获取canvas盒子：canvas上下文
const context = canvas.getContext('2d');//绘制的形式
context.fillStyle='red';//绘制内容填充颜色
context.beginPath();//开始绘制，告诉canvas绘制路径
context.rect(0.5 * canvas.width - 50, 0.5 * canvas.height - 50, 100, 100);//绘制正方形【rect(x,y,width,height)】
context.fill();//绘制完成填充到画布中
</script>
canvas坐标系
canvas坐标系
考虑旋转或者三维运动，canvas坐标系就会变成“左手系”。而左手系的平面法向量的方向和旋转方向，和我们熟悉的右手系相反。
左手系和右手系
canvas相关方法API
context.translate(x,y);平移画布
context.save(); 暂存状态
context.restore(); 恢复状态
context.save(); // 暂存状态
context.translate(-0.5 * rectSize[0], -0.5 * rectSize[1]);
... 执行绘制
context.restore(); // 恢复状态
二、利用canvas绘制层次关系图
概念层次结构数据 （Hierarchy Data）:是可视化领域的专业术语，用来表示能够体现层次结构的信息，例如城市与省与国家。一般来说，层次结构数据用层次关系图表来呈现。
其中，城市数据是一组 JSON 格式的数据，如下所示。
{
"name":"中国",
"children":
[
{
"name":"浙江" ,
"children":
[
{"name":"杭州" },
{"name":"宁波" },
{"name":"温州" },
{"name":"绍兴" }
]
},
{
"name":"广西" ,
"children":
[
{"name":"桂林"},
{"name":"南宁"},
...
}
]
}
效果图
利用 Canvas 绘制几何图形需要注意的三个点：
1、在 HTML 中建立画布时，我们要分别设置画布宽高和样式宽高；
2、在建立坐标系时，我们要注意 canvas 的坐标系和笛卡尔坐标系在 y 轴上是相反的；
3、如果要把图形绘制在画布中心，我们不能直接让 x、y 的坐标等于画布中心坐标，而是要让图形中心和画布中心的位置重叠。这个操作，我们可以通过计算顶点坐标或者 平移变换来实现。
