Intermediate：HTML 中的 Canvas 标签
概述
什么是 HTML 中的 Canvas Tag？
HTML 中的 Canvas 标签用于流畅地绘制和创建图形。它充当包含绘制图形的 HTML 文档中的容器。可以使用像 JavaScript 这样的脚本语言来绘制此类图形。
canvas 标签本身是透明的，这意味着它不会独立创建图形。 画布标签就像画家在上面创建图形和草图的空白纸。但是，还需要其他工具，如油漆和刷子。JavaScript 的功能类似于这些附加工具。
用于脚本的画布脚本 API（应用程序编程接口）或 WebGL（Web 图形库）API 有助于图形设计过程。通过脚本和 canvas 标签创建的图形包括 2D 对象和位图图像（由网格中的像素组成的光栅图像）。
画布标签没有内置设置或场景。它是用于位图（将图像像素化为网格）的过程性低级标记。
Canvas 标签是 HTML5 上的一项附加功能。因此，旧版本的 HTML 不支持它们。Canvas 标签是一个容器标签。这意味着它需要开始和结束标记。
语法
如果浏览器不支持 Canvas 标签，则会显示包含在 2 个画布标签（打开和关闭）中的文本。
HTML 中 Canvas 标签的属性
除了全局属性之外，canvas 标签支持的属性如下：
| 属性名称 | 接受的值 | 描述 |
|---|---|---|
| 高度 | 像素 | 画布的高度 |
| 宽度 | 像素 | 画布的宽度 |
例子
在开始创建形状之前，了解每个代码背后的基本语法非常重要。
var canvas = document.getElementById("Canvas1");
上面的代码用于选择所有 ID 为“Canvas1”的元素，并将它们存储在变量 canvas 中。getElementbyId 是一种 JavaScript 方法，用于选择具有指定 ID 的对象。
var context = canvas.getContext("2d");
上面的代码利用 JavaScript 中的 getContext（'2d'） 方法来渲染 2D 上下文空间以处理 2D 形状和图形。这可以被认为是空白的白色画架，绘画工作将在上面完成。变量上下文将所有图形操作存储在上下文空间中。
示例 1：创建矩形
.rect（） 方法可用于在 canvas 标签内创建矩形。下面是创建矩形的示例代码。法典
context.beginPath();
context.rect(20, 20, 200, 100);
context.stroke();
输出
上述代码用于创建矩形。第一条线用于开始绘制矩形的过程。实际上，它可以平行于将画笔的尖端保持在画布上。
第 2 行中 .rect（） 方法的前两个参数分别是 x 和 y 坐标。它们用于在 2D 平面上定位矩形。第 3 个和第 4 个参数分别用于指定宽度 （200 px） 和长度 （100 px）。
最后使用第 3 行代码来绘制形状。
示例 2：创建圆
.arc（） 方法用于定义画布上圆的创建。它接受的参数包括：
- x 坐标
- y 坐标
- 圆的半径
- 起始角度
- 结束角
起始角度主要设置为 0，结束角度设置为 2Pi，因为标准圆的角度范围从 0 到 2pi。下面是创建圆圈的示例代码。法典
context.beginPath();
context.arc(95,50,40,0,2*Math.PI);
context.stroke();
代码的第一行用于开始绘制圆的过程。第二行包含上述 .arc（） 方法的参数。stroke（） 方法用于最终绘制曲线。
输出
示例 3：绘制一条线
也可以在画布标签上绘制一条直线。moveTo 和 lineTo 命令分别用于描述线的起始位置和结束位置的 x 和 y 坐标。法典
context.moveTo(0,0);
context.lineTo(300,300);
context.stroke();
输出
示例 4：添加文本
使用 canvas 标签添加文本的方法有很多种。下面介绍其中的一些：
fillText（）
第一种方法使用 fillText（） 方法编写纯文本。法典
context.font = "30px Times New Roman";
context.fillText("Scaler",10,50);
输出
上述代码用于键入文本“Scaler”，字体大小为 30 像素，字体为 Times New Roman。fillText（） 方法的最后两个参数用于 x 和 y 坐标定位。 要添加彩色文本，应编写一行新的代码。
context.fillStyle = "red";
要使文本朝中心对齐，请使用命令：
context.textAlign = "center";
strokeText（） （中风文本）
第二种方法是 strokeText（） 方法，用于在不填充内部的情况下写入文本。法典
context.font = "30px Times New Roman";
context.strokeText("Scaler",10,50);
输出
strokeText（） 方法的最后两个参数用于 x 和 y 坐标定位。
支持的浏览器
| 浏览器 | 支持 | 版本 |
|---|---|---|
| Safari | Yes | >3.1 |
| Chrome | Yes | >4.0 |
| Firefox | Yes | >2.0 |
| Microsoft Edge | Yes | >9.0 |
| Opera Mini | Yes | >9.0 |
结论
- HTML 中的 canvas 标签用作图形对象的容器。
- canvas 标签是一个透明标签，仅用作图形的容器。图形是通过脚本绘制的。
- .rect（） 方法可用于创建矩形，.arc（） 用于创建圆，moveTo（） 和 lineTo（） 用于指定绘制线的起点和终点。
- .beginPath（） 命令用于通知画布将要创建图形。.stroke（） 方法用于创建指定的图形。
- .getContext（'2D'） 方法用于指定用于创建图形的 2D 上下文平面。