使用canvas画一个手机支架

在前端开发中，使用HTML5的<canvas>元素来绘制一个简单的手机支架图形是一个有趣且富有挑战性的任务。以下是一个基本的示例，展示了如何使用Canvas API来绘制一个简单的手机支架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 手机支架</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // 绘制支架底座
        ctx.fillStyle = '#8B4513'; // 支架底座颜色
        ctx.fillRect(300, 500, 200, 50); // 底座位置和大小

        // 绘制支架杆
        ctx.beginPath();
        ctx.moveTo(400, 450); // 支架杆起始位置
        ctx.lineTo(400, 500); // 支架杆结束位置
        ctx.lineWidth = 10; // 支架杆宽度
        ctx.strokeStyle = '#8B4513'; // 支架杆颜色
        ctx.stroke();

        // 绘制手机放置区域
        ctx.fillStyle = '#F0F8FF'; // 手机放置区域颜色
        ctx.fillRect(320, 200, 160, 250); // 手机放置区域位置和大小

        // 绘制手机屏幕
        ctx.fillStyle = '#000000'; // 手机屏幕颜色
        ctx.fillRect(340, 250, 120, 180); // 手机屏幕位置和大小

        // 可以在此基础上继续添加细节，如手机摄像头、按键等
    </script>
</body>
</html>