用h5写一个旋转的动态页面
创建一个旋转的动态页面需要使用HTML5的canvas元素和JavaScript。以下是一个简单的示例，展示了如何创建一个在页面上旋转的动态效果。
-
首先，创建一个HTML文件并添加以下内容：
html复制代码
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>旋转的动态页面</title> | |
<style> | |
body { margin: 0; padding: 0; background-color: #f0f0f0; } | |
canvas { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; } | |
</style> | |
</head> | |
<body> | |
<canvas id="myCanvas" width="400" height="400"></canvas> | |
<script src="script.js"></script> | |
</body> | |
</html> |
-
接下来，创建一个JavaScript文件（例如
script.js）并添加以下内容：
javascript复制代码
const canvas = document.getElementById('myCanvas'); | |
const ctx = canvas.getContext('2d'); | |
const angle = 0; | |
const centerX = canvas.width / 2; | |
const centerY = canvas.height / 2; | |
const radius = 150; | |
function draw() { | |
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布 | |
ctx.save(); // 保存当前状态 | |
ctx.translate(centerX, centerY); // 移动到旋转中心点 | |
ctx.rotate(angle * Math.PI / 180); // 旋转画布 | |
ctx.fillStyle = 'blue'; // 设置填充颜色为蓝色 | |
ctx.beginPath(); // 开始绘制路径 | |
ctx.arc(0, 0, radius, 0, Math.PI * 2); // 绘制一个圆形路径 | |
ctx.closePath(); // 结束绘制路径 | |
ctx.fill(); // 填充路径区域 | |
ctx.restore(); // 恢复之前保存的状态 | |
} | |
function animate() { | |
requestAnimationFrame(animate); // 使用requestAnimationFrame进行动画循环 | |
angle += 1; // 每帧增加角度值，使图形旋转得更快或更慢 | |
draw(); // 重绘图形以创建旋转效果 | |
} | |
animate(); // 开始动画循环 |
- 将HTML文件和JavaScript文件保存在同一个文件夹中，然后在浏览器中打开HTML文件，你将会看到一个旋转的动态页面效果。