console 命令行工具 X clear

console

let str =`
你理解错了  我给你重新梳理下需求:
背景：公司需要做一个篮球比赛得选宣传海页
标题：一起拼，一起赢
副标题：第一届篮球比赛，重磅来袭。
简介：懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种非常好的优化网页性能的方式。
当可视区域没有滚到资源需要加载的地方时候，可视区域外的资源就不会加载。
可以减少服务器负载，常适用于图片很多，页面较长的业务场景中。
宣传图：https://i.postimg.cc/QCmRfz9F/202303151714191.jpg
报名链接：https://www.baidu.com/

要求如下：顶部为标题采用26号字体，副标题22号字体，中间为宣传图，简介文案位于宣传图两侧，底部设有一个报名按钮，点击跳转报名链接
`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zrender 绘制示例</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zrender/5.3.0/zrender.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      text-align: center;
    }
    #poster {
      margin-top: 20px;
      width: 800px; /* 设置 Canvas 的宽度 */
      height: 400px; /* 设置 Canvas 的高度 */
      border: 1px solid #ccc;
      position: relative; /* 设置相对定位 */
    }
    #popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      z-index: 1000;
    }
  </style>
</head>
<body>
  <div id="poster"></div>

  <script>
    var zr = zrender.init(document.getElementById('poster'));

    // 绘制标题
    var titleText = new zrender.Text({
      style: {
        text: 'Zrender 绘制示例',
        x: 350,
        y: 50,
        fontSize: 24,
        fontWeight: 'bold',
        fill: '#333'  // 设置文本颜色为黑色
      }
    });
    zr.add(titleText);

    // 绘制简介
    var descriptionText = new zrender.Text({
      style: {
        text: '这是一个使用 Zrender 绘制标题、简介和按钮的示例。',
        x: 350,
        y: 90,
        fontSize: 16,
        fill: '#333'  // 设置文本颜色为黑色
      }
    });
    zr.add(descriptionText);

    // 添加图片
    var image = new zrender.Image({
      style: {
        image: 'https://i.postimg.cc/MpbGyDcb/2c0ac140f3c048a18e66179b440882fb.jpg',
        x: 50,
        y: 50,
        width: 250,
        height: 300
      }
    });
    zr.add(image);

    // 添加按钮（矩形）
    var buttonRect = new zrender.Rect({
      shape: {
        x: 600,
        y: 20,
        width: 120,
        height: 40,
        r: 5  // 圆角半径
      },
      style: {
        fill: '#2196F3',  // 按钮背景颜色
        text: '咨询',  // 按钮文本
        textFill: '#fff',  // 文本颜色
        textPosition: 'inside'  // 文本位置
      }
    });
    buttonRect.on('click', function() {
      document.getElementById('popup').style.display = 'block';
      document.getElementById('popupText').innerText = '你点击了这个按钮';
    });
    zr.add(buttonRect);

    // 添加弹窗内容
    var popupGroup = new zrender.Group();
    popupGroup.position[0] = 300;
    popupGroup.position[1] = 150;

    var popupRect = new zrender.Rect({
      shape: {
        x: -100,
        y: -50,
        width: 200,
        height: 100,
        r: 10
      },
      style: {
        fill: '#fff',
        stroke: '#333',
        lineWidth: 2
      }
    });
    popupGroup.add(popupRect);

    var popupText = new zrender.Text({
      id: 'popupText',
      style: {
        text: '',
        x: -50,
        y: -20,
        fontSize: 16,
        fill: '#333'
      }
    });
    popupGroup.add(popupText);

    var closeButton = new zrender.Rect({
      shape: {
        x: 40,
        y: 30,
        width: 60,
        height: 30,
        r: 5
      },
      style: {
        fill: '#2196F3',
        text: '关闭',
        textFill: '#fff',
        textPosition: 'inside'
      }
    });
    closeButton.on('click', function() {
      document.getElementById('popup').style.display = 'none';
    });
    popupGroup.add(closeButton);

    zr.add(popupGroup);
  </script>

  <div id="popup"></div>
</body>
</html>