这是一个使用JavaScript和HTML5 Canvas实现的简单示例。在这个例子中，我们首先创建一个canvas元素，然后使用requestAnimationFrame函数来实现图片的动画旋转。

HTML代码：

```html

```

JavaScript代码：

```javascript var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d');

var image = document.getElementById('image'); var imgWidth = image.width; var imgHeight = image.height; var radians = 0;

// 旋转角度 function rotate(radians) { // 计算角度 radians += Math.PI * 2; ctx.clearRect(0, 0, imgWidth, imgHeight); ctx.drawImage(image, radians * imgWidth / 180, radians * imgHeight / 180); radians -= Math.PI * 2; }

// 绘制图片 function drawImage() { ctx.drawImage(image, radians * imgWidth / 180, radians * imgHeight / 180); // 重置角度 radians = 0; }

// 每隔一段时间调用一次 setInterval(drawImage, 50); ```

在这个例子中，我们首先获取了canvas元素和一个2D渲染上下文。然后，我们定义了一个函数rotate，这个函数接受一个角度作为参数，然后使用requestAnimationFrame函数来更新canvas的旋转角度。

我们还定义了一个函数drawImage，这个函数使用requestAnimationFrame函数来绘制图片。每次调用drawImage函数，都会绘制一个新的图片。

最后，我们设置了一个定时器，每50毫秒就会调用一次drawImage函数，从而实现图片的动画旋转。