canvas绘图-学习笔记

一、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 的坐标等于画布中心坐标，而是要让图形中心和画布中心的位置重叠。这个操作，我们可以通过计算顶点坐标或者 平移变换来实现。