canvas绘图-学习笔记

2023-01-30  本文已影响0人  Spinach

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

上一篇 下一篇

猜你喜欢

热点阅读