使用HTML5绘制一个发光的灯泡

在HTML5中，你可以使用<canvas>元素与JavaScript来绘制一个发光的灯泡。下面是一个简单的示例，展示了如何创建一个基础的发光灯泡效果：

HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发光的灯泡</title>
    <style>
        body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
        canvas { border: 1px solid black; }
    </style>
</head>
<body>
    <canvas id="lightBulbCanvas" width="400" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript代码 (script.js 文件)：

const canvas = document.getElementById('lightBulbCanvas');
const ctx = canvas.getContext('2d');

// 绘制灯泡的函数
function drawLightBulb() {
    // 灯泡的外部轮廓
    ctx.beginPath();
    ctx.arc(200, 200, 100, 0, Math.PI * 2, false); // 外圆
    ctx.fillStyle = 'yellow';
    ctx.fill();
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'orange';
    ctx.stroke();

    // 灯泡的内部轮廓（发光部分）
    ctx.beginPath();
    ctx.arc(200, 200, 70, 0, Math.PI * 2, false); // 内圆
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.strokeStyle = 'yellow';
    ctx.stroke();

    // 灯泡的底部
    ctx.beginPath();
    ctx.rect(150, 200, 100, 30); // 矩形底部
    ctx.fillStyle = 'orange';
    ctx.fill();
    ctx.stroke();

    // 灯泡的发光效果（使用径向渐变）
    const gradient = ctx.createRadialGradient(200, 200, 70, 200, 200, 100);
    gradient.addColorStop(0, 'rgba(255, 255, 255, 1)'); // 白色中心
    gradient.addColorStop(1, 'rgba(255, 255, 0, 0)'); // 黄色边缘，透明度为0
    ctx.beginPath();
    ctx.arc(200, 200, 100, 0, Math.PI * 2, false); // 外圆，用于发光效果
    ctx.fillStyle = gradient;
    ctx.fill();
}

// 绘制灯泡
drawLightBulb();