怎样在HTML5 canvas上制作月饼动态效果?

在HTML5 canvas上制作月饼动态效果，你可以按照以下步骤操作：

1. **准备基本形状**：
使用`arc()`函数绘制圆形饼面，分别表示月饼的主体部分和边框。设置好起始角度、结束角度以及半径，确保月饼看起来圆润。

let ctx = canvas.getContext('2d');
let radius = 50;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, Math.PI * 2);
ctx.stroke(); // 绘制边框

2. **填充颜色**：
利用`fillStyle`设置月饼的不同颜色区域。比如使用渐变效果，从中心向边缘变化颜色，模拟立体感。

let fillColors = ['#FF6F40', '#FFFFC0', 'white']; // 豆沙、莲蓉、白皮颜色
for (let i = 0; i < fillColors.length; i++) {
    ctx.fillStyle = `radial-gradient(circle at ${canvas.width / 2}, ${fillColors[i]}, transparent)`;
    ctx.beginPath();
    ctx.arc(0, 0, radius * 0.95 + i * 10, 0, Math.PI * 2);
    ctx.fill();
}

3. **添加动态元素**：
可以添加一个或多个小点作为“月牙”装饰，用`moveTo()`和`lineTo()`绘制路径，然后用`fill()`或`stroke()`填充或描边。

let moonPoints = 8;
for (let i = 0; i < moonPoints; i++) {
    let angle = (Math.PI * 2) / moonPoints * i;
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2 + radius * Math.cos(angle), canvas.height / 2 + radius * Math.sin(angle));
    ctx.lineTo(canvas.width / 2 + radius * 0.9 * Math.cos(angle), canvas.height / 2 + radius * 0.9 * Math.sin(angle));
    ctx.closePath();
    ctx.stroke();
}

4. **动画效果**：
如果想让月饼旋转或移动，你可以使用`requestAnimationFrame()`函数创建动画循环，改变月饼的位置或者旋转角度。

function animate() {
    // 更新月饼位置或旋转
    // ...
    requestAnimationFrame(animate);
}

animate();