css3 canvas如何画图?

发布于 2022-09-11 20:19:18 字数 157 浏览 24 评论 0

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

clipboard.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

心奴独伤 2022-09-18 20:19:18

自己用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>
    );
  };

clipboard.png

等风也等你 2022-09-18 20:19:18

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文