HTML5 Canvas
天天向上
发布： 2025-02-23 14:39:26
原创
108
人浏览过
HTML5 <canvas> 元素提供了一个用于绘制图形的区域，可以通过 JavaScript 在这个区域进行动态渲染。它常用于绘制图表、游戏图形、图像编辑、数据可视化等。
1. Canvas 基础
<canvas> 元素本身是一个容器，它没有显示任何内容，除非你使用 JavaScript 来绘制。你可以在 <canvas> 元素中定义图形的宽度和高度。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 基础示例</title>
</head>
<body>
<h1>HTML5 Canvas 示例</h1>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
你的浏览器不支持 Canvas。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制一个红色的矩形
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 150, 100);
</script>
</body>
</html>在上述示例中，我们首先创建了一个 <canvas> 元素，设置了其宽度和高度。接着使用 JavaScript 获取该元素的 context，它是一个用来绘制图形的对象。getContext("2d") 返回一个 2D 绘图上下文，允许我们在画布上绘制图形。
2. 绘制基本图形
canvas 提供了很多绘制方法，可以绘制矩形、圆形、线条、路径等。
示例：绘制圆形和线条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 绘制圆形和线条</title>
</head>
<body>
<h1>HTML5 Canvas 示例</h1>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
你的浏览器不支持 Canvas。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制圆形
ctx.beginPath();
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
// 绘制线条
ctx.beginPath();
ctx.moveTo(50, 400);
ctx.lineTo(450, 400);
ctx.strokeStyle = "green";
ctx.lineWidth = 5;
ctx.stroke();
</script>
</body>
</html>说明：
ctx.beginPath()：开始绘制路径。ctx.arc(x, y, radius, startAngle, endAngle)：绘制一个圆形，x和y是圆心的坐标，radius是圆的半径，startAngle和endAngle表示圆的起始和结束角度。ctx.fill()：填充当前路径。ctx.moveTo(x, y)：移动画笔到指定的坐标。ctx.lineTo(x, y)：绘制从当前点到指定点的直线。ctx.stroke()：沿着路径绘制线条。
3. 绘制文本
Canvas 也可以用来绘制文本。你可以通过 fillText() 或 strokeText() 方法来绘制文本。
示例：绘制文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 绘制文本</title>
</head>
<body>
<h1>HTML5 Canvas 示例</h1>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
你的浏览器不支持 Canvas。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 设置字体
ctx.font = "30px Arial";
ctx.fillStyle = "black";
ctx.fillText("Hello, Canvas!", 100, 100);
// 设置文本的轮廓
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
ctx.strokeText("Hello, Canvas!", 100, 150);
</script>
</body>
</html>说明：
ctx.font：设置字体和大小。ctx.fillText(text, x, y)：在指定位置绘制填充的文本。ctx.strokeText(text, x, y)：绘制轮廓文本。
4. 清除图形
如果你需要清除画布上的部分内容，可以使用 clearRect() 方法。
示例：清除画布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 清除图形</title>
</head>
<body>
<h1>HTML5 Canvas 示例</h1>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
你的浏览器不支持 Canvas。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制一个蓝色矩形
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 100);
// 清除部分区域
ctx.clearRect(100, 75, 50, 50); // 清除矩形区域中的一个部分
</script>
</body>
</html>5. Canvas 动画
你可以使用 requestAnimationFrame 来实现平滑的动画效果。
示例：动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 动画示例</title>
</head>
<body>
<h1>HTML5 Canvas 动画示例</h1>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
你的浏览器不支持 Canvas。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 50;
var y = 50;
var dx = 2;
var dy = 2;
function drawBall() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
// 移动小球
x += dx;
y += dy;
// 检查是否碰到边界，反转方向
if (x + 20 > canvas.width || x - 20 < 0) {
dx = -dx;
}
if (y + 20 > canvas.height || y - 20 < 0) {
dy = -dy;
}
// 请求下一帧动画
requestAnimationFrame(drawBall);
}
drawBall(); // 开始动画
</script>
</body>
</html>小结
<canvas> 是 HTML5 提供的强大工具，用于在网页上动态绘制图形和动画。你可以通过它绘制图像、线条、矩形、圆形、文本、图表等，甚至可以创建复杂的游戏和交互式图形。为了优化性能，动画通常使用 requestAnimationFrame 来进行平滑的帧更新。