console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>篮球比赛宣传海报</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zrender/5.3.0/zrender.min.js"></script>
</head>
<body>
    <canvas id="posterCanvas" width="800" height="600"></canvas>
    <script>
        // 初始化 Zrender
        var zr = zrender.init(document.getElementById('posterCanvas'));

        // 创建标题
        var titleText = new zrender.Text({
            style: {
                text: 'XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击',
                font: 'bold 26px Arial',
                fill: '#000',
                textBaseline: 'top',
                x: 20,
                y: 20
            }
        });
        zr.add(titleText);

        // 创建副标题
        var subtitleText = new zrender.Text({
            style: {
                text: 'XSS 的本质是因为网站没有对恶意代码进行过滤',
                font: 'bold 22px Arial',
                fill: '#000',
                textBaseline: 'top',
                x: 20,
                y: 60
            }
        });
        zr.add(subtitleText);

        // 创建宣传图
        var imageUrl = 'https://i.postimg.cc/K8zc6gCz/lklls.png';
        var image = new zrender.Image({
            style: {
                image: imageUrl,
                x: 200,
                y: 100,
                width: 600,
                height: 300,
                onload: function () {
                    zr.add(this);
                }
            }
        });
          zr.add(image);

        // 创建简介文案
        var introTextLeft = new zrender.Text({
            style: {
                text: '懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种非常好的优化网页性能的方式。',
                font: '14px Arial',
                fill: '#000',
                textBaseline: 'top',
                x: 20,
                y: 450,
                maxWidth: 350
            }
        });
        zr.add(introTextLeft);

        var introTextRight = new zrender.Text({
            style: {
                text: '当可视区域没有滚到资源需要加载的地方时候，可视区域外的资源就不会加载。',
                font: '14px Arial',
                fill: 'red',
                textBaseline: 'top',
                x: 30,
                y: 480,
                maxWidth: 350
            }
        });
        zr.add(introTextRight);
 // 创建报名按钮
var signupButton = new zrender.Rect({
    shape: {
        x: 20,
        y: 520,
        width: 120,
        height: 40,
        r: 8
    },
    style: {
        fill: 'pink',
        text: '报名',  // 设置按钮文案
        textFill: 'red',
        font: 'bold 16px Arial',
        textBaseline: 'middle',
        textAlign: 'center',
        lineWidth: 2,
        stroke: '#FFF'
    },
    onclick: function () {
        window.location.href = 'https://www.baidu.com/';
    }
});
zr.add(signupButton);
    </script>
</body>
</html>