使用HTML5绘制一个正反面的硬币

在HTML5中，你可以使用<canvas>元素和JavaScript来绘制一个正反面的硬币。以下是一个简单的示例，展示了如何绘制一个正面和反面的硬币。

首先，你需要在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="coinCanvas" width="200" height="200"></canvas>
    <button onclick="flipCoin()">翻转硬币</button>
    <script src="script.js"></script>
</body>
</html>

然后，在script.js文件中，你可以使用JavaScript来绘制硬币的正面和反面，并添加一个函数来翻转硬币：

const canvas = document.getElementById('coinCanvas');
const ctx = canvas.getContext('2d');
let isFront = true; // 初始状态为正面

// 绘制硬币正面
function drawFront() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    ctx.beginPath();
    ctx.arc(100, 100, 100, 0, Math.PI * 2); // 绘制圆形
    ctx.fillStyle = 'goldenrod'; // 设置填充颜色为金色
    ctx.fill(); // 填充圆形
    ctx.lineWidth = 5; // 设置线条宽度
    ctx.strokeStyle = 'darkgoldenrod'; // 设置线条颜色为深金色
    ctx.stroke(); // 绘制圆形轮廓
    ctx.font = '30px Arial'; // 设置字体样式和大小
    ctx.textAlign = 'center'; // 设置文本对齐方式
    ctx.textBaseline = 'middle'; // 设置文本基线
    ctx.fillStyle = 'white'; // 设置文本颜色为白色
    ctx.fillText('1', 100, 100); // 在硬币上绘制数字1
}

// 绘制硬币反面
function drawBack() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
    ctx.beginPath();
    ctx.arc(100, 100, 100, 0, Math.PI * 2); // 绘制圆形
    ctx.fillStyle = 'silver'; // 设置填充颜色为银色
    ctx.fill(); // 填充圆形
    ctx.lineWidth = 5; // 设置线条宽度
    ctx.strokeStyle = 'darkgray'; // 设置线条颜色为深灰色
    ctx.stroke(); // 绘制圆形轮廓
    ctx.font = '20px Arial'; // 设置字体样式和大小
    ctx.textAlign = 'center'; // 设置文本对齐方式
    ctx.textBaseline = 'middle'; // 设置文本基线
    ctx.fillStyle = 'black'; // 设置文本颜色为黑色
    const text = '国徽'; // 假设反面是国徽，这里用文字代替
    const textWidth = ctx.measureText(text).width; // 测量文本宽度
    ctx.fillText(text, 100 - textWidth / 2, 110); // 在硬币上绘制文本，居中显示
}

// 翻转硬币
function flipCoin() {
    isFront = !isFront; // 切换正反面状态
    if (isFront) {
        drawFront(); // 如果是正面，则绘制正面
    } else {
        drawBack(); // 如果是反面，则绘制反面
    }
}

// 初始绘制正面硬币
drawFront();

这个示例中，我们创建了一个<canvas>元素，并在JavaScript中定义了两个函数drawFront和drawBack来分别绘制硬币的正面和反面。我们还定义了一个flipCoin函数来切换硬币的正反面，并重新绘制。最后，我们在页面加载时初始绘制了正面硬币。

posted @ 2024-12-24 06:01  王铁柱6  阅读(43)  评论(0)    收藏  举报