随风飘扬：如何用Canvas画出绝妙的热气球

现在打开我们熟悉的canvas，使用JavaScript，你将学习到一个神奇的技巧，将二维的canvas变成一个浪漫迷人的立体天空。

在开启本次旅程之前，我们需要先把画布铺好，用canvas创建一个新的画布。在JavaScript中，你可以使用如下代码来实现：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

接着，需要设置画布的宽度和高度，让你的热气球有足够的空间翱翔。使用以下代码即可完成：

canvas.width = 800;
canvas.height = 600;

好了，现在是展现我们艺术天赋的时候了！首先，我们将用圆形绘制热气球的身体。使用如下代码：

ctx.beginPath();
ctx.arc(400, 200, 100, 0, 2 * Math.PI);
ctx.fillStyle = "#ff9900";
ctx.fill();

接着，使用优雅的弧线，绘制出热气球可爱的篮子：

ctx.beginPath();
ctx.moveTo(400, 300);
ctx.lineTo(350, 400);
ctx.lineTo(450, 400);
ctx.closePath();
ctx.fillStyle = "#804000";
ctx.fill();

最后，给热气球加上绳子，让它飞向天空：

ctx.beginPath();
ctx.moveTo(400, 200);
ctx.lineTo(400, 100);
ctx.strokeStyle = "#000000";
ctx.lineWidth = 2;
ctx.stroke();

好了，一个栩栩如生的热气球便完成了。是否想让它随风飘动呢？这需要我们使用动画，代码如下：

function animate() {
    requestAnimationFrame(animate);

    //让热气球慢慢飘起来
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(400, 200 - balloonY, 100, 0, 2 * Math.PI);
    ctx.fillStyle = "#ff9900";
    ctx.fill();

    // 更新气球的高度
    balloonY += 1;

    // 当气球到达顶部时，让它从底部重新开始
    if (balloonY > canvas.height) {
        balloonY = 0;
    }
}

var balloonY = 0;
animate();

至此，一个热气球随风飘动的动画就完成了，赶紧去尝试一下吧！