console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
<head>
    <title>Canvas 海报示例</title>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <style>
        * { 
            margin: 0; 
            padding: 0;
            background: #000000; 
        }
        canvas {
            display: block;
            width: 100% 
        }
        button {
            margin: 10px;
            padding: 8px 15px;
        }
    </style>
</head>
<body>
    <canvas id="poster" width="360" height="796"></canvas>

    <script>
        // 获取 canvas 元素
        const canvas = document.getElementById('poster');
        const ctx = canvas.getContext('2d');

        // 绘制背景
        function drawBackground() {
            // 渐变背景
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, '#4facfe');
            gradient.addColorStop(1, '#00f2fe');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        // 绘制装饰元素
        function drawDecoration() {}

        // 绘制文字
        function drawText() {}

        // 绘制图片
        function drawImage() {
            const img = new Image();
            img.src = 'https://ykt-rt-c2.yiketu.com/sys/tpl_material_widget/preview_img/2025-01-17/0aa87bac81178e14cdd892ea3bc8c02f.png?x-oss-process=image%2Fformat%2Cwebp%2Fresize%2Cw_500'; // 替换为实际图片地址
            img.onload = function() {
                // 绘制带圆角的图片
                const x = 0;
                const y = 0;
                const width = canvas.width;
                const height = canvas.height;
                
                // 创建圆角矩形路径
                ctx.beginPath();
                ctx.moveTo(x + 0, y);
                ctx.arcTo(x + width, y, x + width, y + height, 0);
                ctx.arcTo(x + width, y + height, x, y + height, 0);
                ctx.arcTo(x, y + height, x, y, 0);
                ctx.arcTo(x, y, x + width, y, 0);
                ctx.closePath();
                
                // 剪切路径
                ctx.clip();
                ctx.drawImage(img, x, y, width, height);

                // 绘制优惠券样式
                const centerX = canvas.width * 0.4;  // 左侧20%位置
                const centerY = canvas.height * 0.2; // 顶部20%位置
                const radius = Math.min(canvas.width, canvas.height) * 0.1; // 取短边的10%
                ctx.fillStyle = '#ff4757';
                ctx.beginPath();
                ctx.arc(50, 700, radius, 0, Math.PI * 2);
                ctx.fill();
            
                ctx.fillStyle = '#fff';
                ctx.font = 'bold 36px Arial';
                ctx.fillText('50%', 50, 700);

                // 绘制文字
                ctx.fillStyle = '#fff';
                ctx.font = 'bold 48px "Microsoft Yahei"';
                ctx.textAlign = 'center';
            
                // 主标题
                ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
                ctx.shadowOffsetX = 5;
                ctx.shadowOffsetY = 5;
                ctx.shadowBlur = 5;
                ctx.fillText('夏季大促销', canvas.width/2, 150);

                // 副标题
                ctx.font = '28px Arial';
                ctx.fillStyle = '#ffff00';
                ctx.fillText('全场商品5折起', canvas.width/2, 220);
            };
        }

        
        // 生成海报
        function generatePoster() {
            drawBackground();
            drawText();
            drawImage();
            drawDecoration();
        }

        // 保存海报
        function downloadPoster() {
            const link = document.createElement('a');
            link.download = 'poster.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        }

        // 初始化生成
        generatePoster();
    </script>
</body>
</html>