js canvas 绘制小猪佩奇

Canvas是HTML5中提供的一种绘图API，它允许开发者在网页上动态绘制图形和动画。如果你想在JavaScript中使用Canvas绘制小猪佩奇，这是一个简单的概念演示，因为小猪佩奇的细节较多，直接写出代码会相当复杂，但我会给出一个基本的步骤和几个关键部分的代码示例：

1. 创建Canvas元素：

const canvas = document.getElementById("piggyCanvas");
const ctx = canvas.getContext("2d");

2. 定义小猪佩奇的基本形状（这里只做简单示例，可能需要多个函数分别处理不同部分）：

function drawBody() {
    // 猪的身体
    ctx.fillStyle = "pink";
    ctx.beginPath();
    ctx.arc(50, 70, 30, 0, Math.PI*2);
    ctx.fill();
}

function drawFace() {
    // 猪的脸
    ctx.beginPath();
    ctx.arc(80, 60, 20, 0, Math.PI*2);
    ctx.fillStyle = "white";
    ctx.arc(80, 50, 10, 0, Math.PI*2);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(90, 50, 10, 0, Math.PI*2);
    ctx.arc(70, 50, 10, 0, Math.PI*2);
    ctx.fill();
}

3. 绘制并组合形状：

drawBody();
drawFace();
ctx.closePath(); // 关闭路径，防止后续绘制影响之前的部分

4. 添加动画（例如，每次点击或定时改变位置）：

canvas.addEventListener("click", () => {
    // 当点击时重新绘制或移动小猪
});
setInterval(() => {
    // 每隔一段时间更新位置或绘制新的帧
}, 1000 / 10); // 10帧/秒的简单动画