HTML Canvas 基础教程与案例讲解
什么是 HTML Canvas？
HTML Canvas 是 HTML5 新增的一个元素，它提供了一个用于在网页上进行 2D 绘图的画布，可以用来绘制图形、图像、文本等。
如何使用 HTML Canvas？
要使用 HTML Canvas，你需要先在 HTML 中定义一个 <canvas> 元素，然后通过 JavaScript 来访问 Canvas 的绘图上下文（Context），并进行绘图操作。
示例 HTML：
<canvas id="myCanvas" width="400" height="300"></canvas>示例 JavaScript：
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var context = canvas.getContext('2d');
// 在这里进行绘图操作
}
}
</script>
案例讲解：绘制一个简单的矩形
接下来我们将展示如何使用 Canvas 绘制一个简单的矩形。
步骤：
1.
在 HTML 中定义一个 <canvas> 元素。
2.
使用 JavaScript 访问 Canvas 的 2D 绘图上下文。
3.
使用绘图上下文提供的API来绘制矩形。
完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>绘制矩形示例</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.fillStyle = "blue"; // 设置填充颜色为蓝色
context.fillRect(50, 50, 150, 100); // 绘制一个左上角在(50,50)，宽度为150、高度为100的矩形
}
}
</script>
</body>
</html>
将上面的代码保存为一个 HTML 文件并在浏览器中打开，你会看到一个蓝色的矩形。
