canvas绘图树状图

简单的用几个H5canvas属性绘制以上的树状图

  //简单的设置一下canvas样式
    <style>
      canvas {
        border: 1px solid black;
        background: beige;
      }
    </style>
 
    <canvas width="500" height="250" id="canvas"></canvas>

    <script>
     //获取页面元素canvas
      let cvs = document.getElementById("canvas");
       //设置2d
      let ctx = cvs.getContext("2d");
      //定义变量
      const WIDTH = 500; //画布宽
      const HEIGHT = 250; //画布高
      let barw = 50; //柱子的宽
      let data = [120, 200, 150, 80, 70, 110, 130]; //数据
      //整理绘制图像时所需要的参数
      let xs = []; //柱子的x坐标数组
      let ys = []; //柱子的y坐标数组
      let ws = []; //柱子的宽度数组
      let hs = []; //柱子的高度数组
      let fx = (WIDTH - data.length * barw) / (data.length * 2);
      for (let i = 0; i < data.length; i++) {
        xs.push(i * barw + (2 * i + 1) * fx);
        ys.push(HEIGHT - data[i] - 25);
        ws.push(barw);
        hs.push(data[i]);
      }
      //开始绘制canvs
      let shuju = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      for (let i = 0; i < data.length; i++) {
        ctx.fillStyle = "#33c";
        ctx.fillRect(xs[i], ys[i], ws[i], hs[i]);
        ctx.fillStyle = "black";
        ctx.font = "15px 微软雅黑";
        ctx.textAlign = "center";
        ctx.fillText(shuju[i], xs[i] + barw / 2, HEIGHT - 10);
      }
    </script>

 在设置文字居中的时候 他是基于x对齐 需要加上柱形的宽的二分之一