index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绘图测试</title>
  </head>
  <body>
    <script src="./dist/flowings.js"></script>
    <script>
      (async function () {
        console.log("Flowing", window, $);
        const { canvas, context } = new $.Flowings();
        const layerHelper = new $.LayerHelper();

        layerHelper.layers = {
          images: [
            {
              image_url:
                "https://img.laiye.com/cLvgXicdq4RMvFgMeyiarFciatqCEPrkGudP9N6SceHhmA4Tl2unDvK4rNVCFroJZcfqMnUGvnBeDLaZpDYW0TRl9lxmD47gs70.jpg",
              x: 48,
              y: 48,
              width: 150,
              height: 150,
              border_radius: 25,
              resize: true,
              rotate: 45,
            },
            {
              x: 0,
              width: 750,
              height: 750,
              image_url: "https://img.laiye.com/checkinAlbum_20200316083737_htqvLACrln.jpg",
              z: 1,
              opacity: 0.5,
            },
          ],
          texts: [
            {
              x: 0,
              z: 200,
              content: "我爱北京天安门，呵呵哈尔呵呵，呵呵哈尔呵呵，呵呵哈尔呵呵",
              size: 36,
              line_height: 50,
              font_style: "normal",
              font_weight: "bold",
              align: "center",
              limit: 750,
              color: "red",
            },
          ],
          lines: [
            {
              color: "blue",
              x1: 10,
              x2: 200,
              y1: 10,
              y2: 10,
              line_width: 1,
            },
          ],
        };

        await layerHelper.load();
        // layerHelper.prepareToRender();
        layerHelper.render(context);
      })();
    </script>
  </body>
</html>