canvas 倒梯形 比例数据图

最终展现：（上底边-总数根据下底边-成交数的比例自动计算）

html：

<canvas id="myCanvas" width="1400" height="400">
     <p>您的浏览器不支持canvas，请升级版本或更换其他浏览器</p>
 </canvas>

js:

this.paint(29,5,17%  );
paint(total, contract, trans) {
      if (total) {
        let myCanvas = document.getElementById("myCanvas");
        let ctx = myCanvas.getContext("2d");
        ctx.fillStyle = "#9bcc66";

        let topPadding = 50; // 上边距离顶部的距离
        let height = 250; // 上下边高度
        let topStartX = 400; // 上边左侧的x
        let topEndX = 1000; // 上边右侧的x
        let topLength = topEndX - topStartX; // 上边长度
        let midX = topLength / 2 + topStartX; // 中点
        let bottomHalf = ((contract / total) * top