html5动画制作

##### 2. 使用JavaScript控制SVG动画

虽然SVG本身支持一些内置的动画功能，但有时我们需要更灵活的控制，这时，可以使用JavaScript来动态修改SVG元素的属性。

```html

```

这段代码使圆形沿着一个圆形路径旋转，通过计算圆心坐标并动态设置`cx`和`cy`属性，我们实现了平滑的旋转效果。

#### 六、综合案例：创建一个交互式动画

为了更好地理解HTML5动画的实际应用，让我们创建一个完整的交互式动画案例，假设我们要制作一个简单的游戏场景，其中有一个角色可以在屏幕上自由移动。

##### 1. HTML结构

```html

```

##### 2. JavaScript逻辑

```javascript

const canvas = document.getElementById('gameCanvas');

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

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

const player = {

x: canvas.width / 2,

y: canvas.height / 2,

size: 50,

speed: 5,

};

function drawPlayer() {

ctx.fillStyle = 'green';

ctx.beginPath();

ctx.arc(player.x, player.y, player.size / 2, 0, Math.PI * 2);

ctx.fill();

function clearCanvas() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

document.addEventListener('keydown', (event) => {

switch (event.key) {

case 'ArrowUp':

player.y -= player.speed;

break;

case 'ArrowDown':

player.y += player.speed;

break;

case 'ArrowLeft':

player.x -= player.speed;

break;

case 'ArrowRight':

player.x += player.speed;

break;

}

});

function gameLoop() {

clearCanvas();

drawPlayer();

requestAnimationFrame(gameLoop);

gameLoop();

```

在这个案例中，玩家可以通过键盘箭头键控制一个绿色圆形角色在屏幕上移动，`gameLoop`函数负责每帧更新画布内容，确保