用canvas动画让方块先变大再变小

在HTML5 Canvas上创建一个动画，让方块先变大再变小，可以按照以下步骤进行：

1. **设置基础元素**:
创建一个方形画布元素，并给它一个初始大小。

<canvas id="myCanvas" width="400" height="400"></canvas>

2. **获取上下文**:
获取到`canvas`的2D渲染上下文，这是绘制图像的地方。

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var squareWidth = 50;
var square = { x: canvas.width / 2 - squareWidth / 2, y: canvas.height / 2 - squareWidth / 2 };

3. **绘制方块**:
定义一个函数来绘制当前大小的方块。

function drawSquare() {
    ctx.fillStyle = 'blue';
    ctx.fillRect(square.x, square.y, squareWidth, squareWidth);
}

4. **动画循环**:
使用`requestAnimationFrame`创建一个动画帧循环，每次循环都会更新方块的大小并调用`drawSquare`函数。

function animate() {
    // 变化大小
    var newSize = squareWidth + 1; // 先放大
    if (newSize > canvas.width || newSize > canvas.height) {
        // 当方块大小超过边界，开始缩小
        newSize = squareWidth - 1;
    }
    squareWidth = newSize;

    // 更新方块位置
    square.x += 2; // 动画速度

    // 绘制新状态
    drawSquare();

    // 下一次动画请求
    requestAnimationFrame(animate);
}

// 开始动画
animate();