使用canvas制作一个卡通的月饼

要使用HTML的<canvas>元素来制作一个卡通的月饼，你需要首先了解一些基本的Canvas API，如fillRect来填充颜色，beginPath和arc来绘制圆形等。以下是一个简单的示例，展示了如何绘制一个基本的卡通风格月饼：

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="mooncake" width="400" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js文件)：

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

// 绘制月饼的外层
function drawOuterLayer() {
    ctx.beginPath();
    ctx.arc(200, 200, 150, 0, Math.PI * 2);
    ctx.fillStyle = '#FFEBCD'; // 浅黄色
    ctx.fill();
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#8B4513'; // 深棕色边框
    ctx.stroke();
}

// 绘制月饼的内层
function drawInnerLayer() {
    ctx.beginPath();
    ctx.arc(200, 200, 100, 0, Math.PI * 2);
    ctx.fillStyle = '#FFD700'; // 金色
    ctx.fill();
}

// 绘制月饼上的图案（例如：一个简单的笑脸）
function drawPattern() {
    // 绘制两个眼睛
    ctx.beginPath();
    ctx.arc(170, 180, 10, 0, Math.PI * 2);
    ctx.fillStyle = '#000000'; // 黑色眼睛
    ctx.fill();
    ctx.beginPath();
    ctx.arc(230, 180, 10, 0, Math.PI * 2);
    ctx.fillStyle = '#000000'; // 另一个黑色眼睛
    ctx.fill();

    // 绘制一个嘴巴
    ctx.beginPath();
    ctx.arc(200, 200, 50, 0.2 * Math.PI, 0.8 * Math.PI, false); // 嘴巴是一个半圆弧
    ctx.stroke();
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#FF0000'; // 红色嘴巴
    ctx.stroke();
}

// 绘制整个月饼
function drawMooncake() {
    drawOuterLayer();
    drawInnerLayer();
    drawPattern();
}

// 执行绘制函数
drawMooncake();