HTML (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> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .contain

这段代码创建了一个贷款额度图片生成器，用户输入姓名和贷款额度后点击按钮会生成一张包含这些信息的图片。以下是代码分析和改进建议： 1. 当前实现使用Canvas生成图片，但图片样式较简单，可以考虑添加更多视觉元素 2. 生成的图片没有保存功能，用户无法下载 3. 输入验证可以更完善，比如限制贷款额度必须为正数改进后的代码（添加下载功能）： ```javascript document.getElementById('generateBtn').addEventListener('click', function() { const name = document.getElementById('name').value.trim(); const amount = document.getElementById('amount').value; if (!name || !amount) { alert('请输入姓名和贷款额度！'); return; } if (amount <= 0) { alert('贷款额度必须大于0！'); return; } const canvas = document.createElement('canvas'); canvas.width = 400; // 增大画布宽度 canvas.height = 250; // 增大画布高度 const ctx = canvas.getContext('2d'); // 渐变 const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); gradient.addColorStop(0, '#4facfe'); gradient.addColorStop(1, '#00f2fe'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制文字 ctx.fillStyle = '#fff'; ctx.font = 'bold 20px Arial'; ctx.fillText('贷款审批结果', 20, 40); ctx.font = '16px Arial'; ctx.fillText(`姓名: ${name}`, 20, 80); ctx.fillText(`贷款额度: ${amount}元`, 20, 120); ctx.fillText('状态: 审核通过', 20, 160); ctx.font = 'bold 18px Arial'; ctx.fillText('恭喜您，贷款申请已通过！', 20, 200); // 添加边框 ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.strokeRect(10, 10, canvas.width-20, canvas.height-20); // 显示图片 const imageUrl = canvas.toDataURL('image/png'); const resultImg = document.getElementById('resultImage'); resultImg.src = imageUrl; document.getElementById('output').style.display = 'block'; // 添加下载按钮 const downloadBtn = document.createElement('button'); downloadBtn.textContent = '下载图片'; downloadBtn.style.marginTop = '10px'; downloadBtn.onclick = function() { const link = document.createElement('a'); link.download = `${name}_贷款审批结果.png`; link.href = imageUrl; link.click(); }; const outputDiv = document.getElementById('output'); if (!document.getElementById('downloadBtn')) { downloadBtn.id = 'downloadBtn'; outputDiv.appendChild(downloadBtn); } }); ``` 三条额外需要注意的逻辑点： 1. 画布尺寸应根据显示需求合理设置，过小可能导致文字显示不全 2. 下载功能需要处理文件名中的特殊字符，避免下载出错 3. 渐变的颜色选择应考虑对比度，确保文字清晰可读 [2025-04-10 15:46:20 | AI写代码神器 | 725点数解答]

实用工具查看更多