Canvas元素是HTML5中的新特性，可以在网页上绘制图形和动画。以下是使用Canvas元素绘制一个简单的矩形和动画的演示代码：
<!DOCTYPE html>
<html>
<head>
<title>Canvas Demo</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
// 获取Canvas元素
var canvas = document.getElementById("myCanvas");
// 获取绘图上下文
var ctx = canvas.getContext("2d");
// 绘制矩形
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100);
// 动画
var x = 50;
var y = 200;
var dx = 5;
var dy = -5;
function draw() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制矩形
ctx.fillStyle = "red";
ctx.fillRect(x, y, 50, 50);
// 移动矩形
if (x + dx > canvas.width - 50 || x + dx < 0) {
dx = -dx;
}
if (y + dy > canvas.height - 50 || y + dy < 0) {
dy = -dy;
}
x += dx;
y += dy;
}
setInterval(draw, 10);
</script>
</body>
</html>
以上代码使用Canvas元素绘制了一个蓝色的矩形，并且实现了一个动画，通过不断地改变矩形的位置来产生动画效果。
