html5动画效果代码
时间: 2023-07-02 13:07:46 浏览: 61
以下是一个简单的 HTML5 动画效果的代码示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Animation</title>
<style>
#canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 50;
var startAngle = 0;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
function drawCircle() {
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
ctx.fillStyle = "#f00";
ctx.fill();
ctx.closePath();
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawCircle();
x += 1;
if (x > canvas.width) {
x = 0;
}
}
animate();
</script>
</body>
</html>
```
这段代码定义了一个圆形的动画效果,圆形会在画布上不停地向右移动,当它到达画布的右侧边界时,会重新回到画布的左侧边界。这个动画效果通过 requestAnimationFrame() 方法实现,这是一个在浏览器下一次重绘之前调用的函数,因此可以用于创建动画效果。