使用canvas制作一张优惠券-CSDN博客

本文链接：https://blog.csdn.net/2401_87873725/article/details/144496866

使用 HTML5 的 <canvas> 元素来制作一张优惠券是一个有趣且实用的前端开发任务。以下是一个简单的步骤指南，帮助你开始制作：

1. 创建 HTML 结构

首先，你需要在 HTML 文件中创建一个 <canvas> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优惠券生成器</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="couponCanvas" width="800" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

2. 编写 JavaScript 代码

在 script.js 文件中，你将使用 JavaScript 来绘制优惠券。

window.onload = function() {
    const canvas = document.getElementById('couponCanvas');
    const ctx = canvas.getContext('2d');

    // 设置背景颜色
    ctx.fillStyle = '#FFFACD';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 绘制边框
    ctx.strokeStyle = '#000000';
    ctx.lineWidth = 5;
    ctx.strokeRect(0, 0, canvas.width, canvas.height);

    // 添加文本
    ctx.font = '30px Arial';
    ctx.fillStyle = '#000000';
    ctx.fillText('优惠券', 50, 50);

    // 添加更多细节，如优惠金额、有效期、使用条件等
    ctx.font = '20px Arial';
    ctx.fillText('享受 $10 折扣', 50, 100);
    ctx.fillText('有效期至 2023-12-31', 50, 130);
    ctx.fillText('满 $100 可用', 50, 160);

    // 添加二维码（可选）
    // 你需要使用一个库来生成二维码，例如 qrcode.js

    // 添加图片（可选）
    const image = new Image();
    image.onload = function() {
        ctx.drawImage(image, canvas.width - 150, 10, 100, 100);
    };
    image.src = 'path_to_your_image.jpg'; // 替换为你的图片路径
};