canvas 倒梯形 比例数据图

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

html：

     
您的浏览器不支持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) * topLength) / 2; // 下边长度1/2
        let botStartX = midX + bottomHalf; // 下边右侧的x
        let botEndX = midX - bottomHalf; // 下边左侧的x
        ctx.beginPath();
        ctx.moveTo(topStartX, topPadding);
        ctx.lineTo(topEndX, topPadding);
        ctx.lineTo(botStartX, height);
        ctx.lineTo(botEndX, height);

        ctx.fill();

        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.moveTo(topEndX, topPadding);
        ctx.lineTo(topEndX + 50, topPadding);
        ctx.strokeStyle = "#ccc";
        ctx.stroke();
        ctx.font = "16px MicrosoftYaHei";
        ctx.fillText(`总数: ${total}`, 1050, topPadding);

        ctx.beginPath();
        ctx.moveTo(botStartX, height);
        ctx.lineTo(botStartX + 100, height);
        ctx.stroke();
        ctx.fillText(`成交数：${contract}`, botStartX + 100, height);

        ctx.beginPath();
        ctx.moveTo(topEndX / 2, 150);
        ctx.lineTo(topEndX / 2 + 100, 150);
        ctx.stroke();
        ctx.fillText(`比例：${trans}`, 400, 150);
      }
    }