根据以下要求写出代码在 photo.html 文件中添加 <canvas> 标签。 添加 <script> 标签，并在其中编写 JavaScript 代码。首先定义 anim() 函数，在其中实现动画效果，即使用 requestAnimationFrame() 方法来定时运行动画，累计旋转角度和缩放系数，再分别调用 rotate() 方法和scale() 方法实现图像的旋转和缩放。然后在画布上加载图像，使用translate() 方法平移旋转原点的位置，最后调用 anim() 函数。
时间: 2024-03-19 14:44:56 浏览: 14
以下是根据要求编写的代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Animation</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// 获取画布和上下文
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 加载图像
var img = new Image();
img.src = "path/to/image.png";
img.onload = function() {
// 设置画布大小和图像位置
canvas.width = img.width;
canvas.height = img.height;
ctx.translate(canvas.width/2, canvas.height/2);
ctx.drawImage(img, -img.width/2, -img.height/2);
// 定义动画函数
function anim() {
// 累计旋转角度和缩放系数
var angle = 0;
var scale = 1;
// 调用 rotate() 和 scale() 方法实现图像的旋转和缩放
ctx.rotate(angle * Math.PI / 180);
ctx.scale(scale, scale);
// 清空画布并重新绘制图像
ctx.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
ctx.drawImage(img, -img.width/2, -img.height/2);
// 循环调用 anim() 函数
requestAnimationFrame(anim);
}
// 调用 anim() 函数开始动画
anim();
};
</script>
</body>
</html>
```
注意：代码中的 `path/to/image.png` 应该替换为实际的图像路径。另外，`anim()` 函数中的旋转角度和缩放系数可以根据需要进行调整。
相关推荐
