HTML5:七天学会基础动画网页6
在HTML5中，创建一个基础的动画网页涉及到使用<canvas>元素和JavaScript。以下是一个简单的示例，演示如何在网页上创建一个简单的动画：
<!DOCTYPE html>
<html>
<head>
<title>基础动画示例</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;
var y = 50;
var dx = 2;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2);
ctx.fill();
x += dx;
if (x > canvas.width || x < 0) {
dx = -dx;
}
}
setInterval(draw, 10);
</script>
</body>
</html>这段代码创建了一个圆形的动画对象，该对象在屏幕上不断移动，当碰到边界时反弹。这个示例简单地展示了如何使用setInterval函数来周期性地更新画布上的对象，从而创建动画效果。
评论已关闭