css3 canvas如何画图？

Question

中间是echarts，但是这样不规则图形如何绘画呢？用图片太不灵活，我觉得还是canvas好用，但是不知道如何绘制？

Answer 1

自己用svg画好，然后用绝对定位好文字内容，如下所示：

  //外框
  svgHeader = (width, height) => {
    const corner_top_left = "0,0";
    const corner_top_right = `${width},0`;
    const corner_bottom_left = `0,${height}`;
    const corner_bottom_right = `${width},${height}`;

    //三角和线的距离
    const empty_wh = 5;
    //三角宽度
    const triangel_width = 10;
    //三角高度
    const triangel_height = 10;

    // 除了三角的起始点x
    const full_start_x = `${triangel_width + empty_wh},0`;
    //除了三角的起始点y
    const full_start_y = `0,${triangel_height + empty_wh}`;
    //除了三角完整的线
    const corner_full = `${full_start_x} ${corner_top_right} ${corner_bottom_right} ${corner_bottom_left} ${full_start_y} ${full_start_x}`;

    // 左上三角
    const corner_top_left_triangel = `${corner_top_left} ${triangel_width},0 0,${triangel_width} ${corner_top_left}`;

    const top_line = `${full_start_x} ${corner_top_right}`;
    const right_line = `${corner_top_right} ${corner_bottom_right}`;
    return (
      <svg width={width} height={height} style={{ position: "relative", zIndex: "30", boxShadow: "inset 0px 0 50px rgba(50, 79, 150, .5)" }}>
        <defs>
          <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="rgb(97,172,252)" stopOpacity="1" />
            <stop offset="100%" stopColor="rgb(48,75,143)" stopOpacity="1" />
          </linearGradient>
        </defs>
        <polygon points={corner_top_left_triangel} style={{ fill: "rgb(97, 172, 252)", stroke: "rgb(97, 172, 252)", strokeWidth: "2" }} />
        <polygon class="shadow" points={corner_full} style={{ fill: "#12345603", stroke: "url(#grad1)", strokeWidth: "1" }} />
        <polygon points={right_line} style={{ stroke: "#314f96", strokeWidth: "2" }} />
        <line x1="15" y1="0" x2={width} y2={0} style={{ stroke: "url(#grad1)", strokeWidth: "2" }} />
        <polygon points={top_line} style={{ stroke: "url(#grad1)", strokeWidth: "2" }} />
      </svg>
    );
  };

Answer 2

先去学习下canvas的api
cannvas
然后去找类似的网上效果学习怎么画的