HTML canvas 语法
在 HTML 中，canvas 标签用于在网页中绘制图形。它提供一张画布，你可以使用 JavaScript 在上面绘制图片、形状或文本。
canvas 应用领域非常广泛，主要包括图形设计、游戏开发、数据可视化等。
语法：
<canvas width="宽度" height="高度"></canvas>说明：
width 属性用于指定 canvas 的宽度，height 属性用于指定 canvas 的高度。
提示: canvas 涉及的内容非常多，它本身完全可以看成是一门独立的技术。更多关于 canvas 的使用，请关注绿叶网未来上线的 canvas 教程。
HTML canvas 摘要
| 属于 | HTML 标签 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML canvas 示例
接下来，我们通过几个简单的例子来讲解一下 HTML canvas 标签是如何使用的。
示例 1：使用 canvas 绘制直线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
<script>
// 1. 获取canvas对象
const cnv = document.getElementById("canvas");
// 2. 获取上下文环境对象context
const cxt = cnv.getContext("2d");
// 3. 开始绘制图形
cxt.moveTo(50, 100);
cxt.lineTo(150, 50);
cxt.stroke();
</script>
</body>
</html>页面效果如下图所示。
分析：
在 Canvas 中，我们使用 document.getElementById() 方法来获取 Canvas 对象（这是一个 DOM 对象），然后使用 Canvas 对象的 getContext("2d") 方法获取上下文环境对象 context，最后使用 context 对象的属性和方法来绘制各种图形。
示例 2：使用 canvas 绘制矩形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
<script>
const cnv = document.getElementById("canvas");
const cxt = cnv.getContext("2d");
cxt.strokeStyle = "red";
cxt.strokeRect(50, 50, 80, 80);
</script>
</body>
</html>页面效果如下图所示。
示例 3：使用 canvas 绘制圆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
<script>
// 获取 DOM
const cnv = document.getElementById("canvas");
const cxt = cnv.getContext("2d");
// 绘制圆形
cxt.beginPath();
cxt.arc(120, 80, 50, 0, 360 * Math.PI / 180, true);
cxt.closePath();
// 填充颜色
cxt.fillStyle = "#9966FF";
cxt.fill();
</script>
</body>
</html>页面效果如下图所示。
