使用canvas制作一个切了一半的西瓜

在前端开发中，使用HTML的<canvas>元素可以绘制各种图形，包括一个被切了一半的西瓜。以下是一个简单的示例，展示了如何使用Canvas API来绘制这样一个图形：

HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切了一半的西瓜</title>
</head>
<body>
    <canvas id="watermelonCanvas" width="400" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript代码 (script.js文件)：

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

    // 绘制西瓜的外皮
    ctx.beginPath();
    ctx.arc(200, 200, 150, 0, Math.PI, false); // 半圆
    ctx.closePath();
    ctx.fillStyle = 'green';
    ctx.fill();
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'darkgreen';
    ctx.stroke();

    // 绘制西瓜的内部（红色果肉）
    ctx.beginPath();
    ctx.arc(200, 200, 130, 0, Math.PI, false); // 稍小的半圆表示果肉
    ctx.closePath();
    ctx.fillStyle = 'red';
    ctx.fill();

    // 绘制西瓜籽
    function drawSeed(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, 2 * Math.PI, false);
        ctx.fillStyle = 'black';
        ctx.fill();
    }

    // 在西瓜内部随机绘制西瓜籽
    for (let i = 0; i < 30; i++) {
        const angle = Math.random() * Math.PI; // 随机角度
        const radius = Math.random() * 130; // 随机半径
        const x = 200 + radius * Math.cos(angle);
        const y = 200 + radius * Math.sin(angle);
        drawSeed(x, y);
    }
};