<！DOCTYPE html>HTML5小動畫代碼
HTML5是新一代的網(wǎng)頁開發(fā)技術(shù)，除了HTML、CSS和JavaScript外，還包含了Canvas、Web Workers、File API等強大的功能模塊。而其中的Canvas模塊，可以讓我們通過代碼實現(xiàn)各種有趣的小動畫。下面是一個簡單的HTML5小動畫代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5小動畫代碼</title>
<style>
/* 設(shè)置canvas寬高為全屏 */
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
// 獲取canvas元素
var canvas = document.getElementById("myCanvas");
// 獲取繪圖上下文
var ctx = canvas.getContext("2d");
// 定義小球的初始位置、半徑和速度
var x = canvas.width/2;
var y = canvas.height-30;
var ballRadius = 10;
var dx = 2;
var dy = -2;
// 繪制小球
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
// 繪制動畫
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
x += dx;
y += dy;
// 碰到墻壁就反彈
if(x + dx >canvas.width-ballRadius || x + dx< ballRadius) {
dx = -dx;
}
if(y + dy >canvas.height-ballRadius || y + dy< ballRadius) {
dy = -dy;
}
}
// 每20毫秒執(zhí)行一次draw函數(shù)，模擬一個大約50幀的動畫
setInterval(draw, 20);
</script>
</body>
</html>以上代碼通過Canvas模塊繪制了一個小球，并通過手動改變小球的位置來實現(xiàn)了一個簡單的反彈動畫。這就是HTML5小動畫的基本實現(xiàn)方法。