HTML5動態火柴人是一種流行的Web設計技術，可以用代碼實現一個有趣的動畫效果。以下是一個示例的HTML5動態火柴人代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5動態火柴人</title>
<style>
#canvas {
border: 1px solid #000000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var headX = 200, headY = 100; // 頭部坐標
var bodyX = 200, bodyY = 150; // 身體坐標
setInterval(function() {
context.clearRect(0, 0, canvas.width, canvas.height); // 清空畫布
// 頭部
context.beginPath();
context.arc(headX, headY, 50, 0, 2*Math.PI);
context.stroke();
// 身體
context.beginPath();
context.moveTo(bodyX, bodyY);
context.lineTo(bodyX, bodyY+150);
context.stroke();
// 左臂
context.beginPath();
context.moveTo(bodyX, bodyY+50);
context.lineTo(bodyX-50, bodyY+100);
context.stroke();
// 右臂
context.beginPath();
context.moveTo(bodyX, bodyY+50);
context.lineTo(bodyX+50, bodyY+100);
context.stroke();
// 左腿
context.beginPath();
context.moveTo(bodyX, bodyY+150);
context.lineTo(bodyX-50, bodyY+200);
context.stroke();
// 右腿
context.beginPath();
context.moveTo(bodyX, bodyY+150);
context.lineTo(bodyX+50, bodyY+200);
context.stroke();
headX += 5; // 頭部向右移動5個像素
bodyX += 5; // 身體向右移動5個像素
}, 100);
};
</script>
</body>
</html>這段代碼使用了HTML5的canvas標簽和JavaScript語言實現了一個簡單的動態火柴人。通過每100毫秒的間隔不斷繪制身體各個部位，并移動頭部和身體的坐標，實現了火柴人向右移動的動畫效果。