用HTML5实现动画
warning:
这篇文章距离上次修改已过443天，其中的内容可能已经有所变动。
在HTML5中，可以使用<canvas>元素来实现动画。以下是一个简单的HTML5动画示例，它使用JavaScript来绘制动画：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas 动画示例</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持Canvas。
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var x = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 50, 50, 50);
x += 10;
if (x > canvas.width) {
x = 0;
}
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
</script>
</body>
</html>这段代码会在一个正方形从左至右移动的动画中重绘一个蓝色的背景。requestAnimationFrame函数用于在浏览器下次绘制屏幕时执行绘图函数，这样可以形成一个连续的动画效果。
评论已关闭