HTML 画布 - 简介

Canvas 是一个 HTML 元素，可以使用 JavaScript 动态生成 2D 形状和位图图像。HTML Canvas 是在网页内绘制图形数据（例如图形、图表和地图）的绝佳替代方案。它是一个以位图形式更新的低级程序模型。

Canvas 元素只是基本的矩形图形容器，通常使用 JavaScript 完成。Canvas 元素内的形状或任何其他图形实现都可以使用 JavaScript 完成。HTML Canvas 元素是一个类似于 div、a 或 table 的 HTML 标签，但其内容是使用 JavaScript 呈现的。

为什么选择画布？

当今有超过 12 亿个网站，这些网站各不相同且具有不同的功能。canvas元素经过专门设计，可以制作独特的视觉内容来开发网站UI，并使它们对用户更具吸引力。它非常容易学习，需要 HTML 和 JavaScript 知识库。

画布和 <img> 标签？

canvas 元素最初看起来像 HTML5 图像 <img> 元素，只是没有“src”和“alt”属性。与图像元素不同，canvas 元素需要结束标记。canvas 元素只有两个属性：宽度和高度。要使用Canvas设计图形，我们必须使用JavaScript。

画布尺寸

默认情况下，画布没有边框，也没有内容。宽度和高度可以在元素中声明，也可以使用 JavaScript 的 DOM 属性手动调整。当代码中没有给出宽度和高度属性时，它将设置为默认值，其中宽度为 300 像素，高度为 150 像素。

该元素还可以使用 Style 标签通过 CSS 设置样式，并且还可以提供边框颜色和粗细等参数。如果给定的 CSS 样式或尺寸与初始 Canvas 不匹配，它将显示为扭曲的矩形。尽管可以使用 CSS 设置 Canvas 元素的样式，但 Canvas 上的实际绘图仍然无效，并且可以使用脚本语言进行修改

Canvas 元素和 Canvas 上下文

使用画布时，了解画布元素和画布上下文之间的基本区别非常重要，因为人们经常将它们混淆。canvas 元素是嵌入在 HTML 页面中的实际 DOM 节点。画布上下文是一个具有属性和方法的对象，可用于在画布元素内渲染图形。上下文可以是 2D 或 3D（通过使用WebGL）。我们可以使用getContext()函数仅将一个上下文分配给 canvas 元素。在同一画布中多次更改上下文可能会导致相同的对象上下文。

Canvas元素的结构

使用属性 id、width、height 和 style 定义一个简单的 <canvas> 元素来观察画布边框。这里需要明确的是，如果不给画布赋予任何样式，即使它形成了，在网页上也无法观察到它。一个简单的画布标签如下所示。

<canvas id="canvas" width="555" height="555" style="border:2px solid black;">
   This browser neither have JavaScript enabled nor support HTML5 canvas tag.
</canvas>

canvas 元素使用 id 或 class 进行标识，以便将来使用 JavaScript 渲染图形。在上面的示例中，画布的尺寸为 555×555，边框为黑色。当出现错误导致画布不显示时，会显示插入到画布标签之间的句子。页面上显示的文本使用户识别出显示画布时出现错误。画布轮廓如下所示。

Canvas元素的结构

HTML5 Canvas 与可扩展矢量图形 (SVG)

可扩展矢量图形 (SVG) 是万维网联盟 (W3C) 于 1999 年开发的一种基于 XML 的标记语言，用于可视化基于 2D 的矢量图形。它是在浏览器中绘制形状和设计图形的早期标准。

SVG 是一种基于文本的开放式 Web 标准，用于描述可以以任何尺寸清晰呈现的图像，并且专门设计用于与其他 Web 标准（包括 CSS、DOM、JavaScript 和 SMIL）良好配合。

SVG 格式的矢量图像可以通过更新其中的文本轻松本地化，而无需任何图形编辑器。HTML Canvas 元素的工作方式与 SVG 类似，但存在一些差异，如下所述。

HTML 画布 可缩放矢量图形 (SVG)
Canvas 使用矩形像素网格表示 2D 图像。 SVG 使用从笛卡尔平面设计的几何形状（例如点、直线和曲线）来表示 2D 图像。
画布对象以立即模式绘制，如果发生任何错误，画布就会变得不规则。 SVG 对象由 DOM 记住，并呈现为位图，以便在属性发生更改时使用。
Canvas 的可扩展性很差，因为它是一个低级的过程模型。 SVG具有很高的可扩展性，我们可以在任何分辨率下打印高质量的图形。
只能使用脚本修改画布。 可以使用 CSS 和脚本修改 SVG。
画布只有一个图形元素。 SVG 有多个元素，它们是页面 DOM 树的一部分。
Canvas元素标签由<canvas>定义。 SVG 元素由 <svg> 标签定义。

画布元素有两种尺寸。第一个是元素本身的大小，可以通过更改元素的宽度和高度属性来更改。

另一个尺寸是元素的绘图表面。CSS 属性只能更改元素的大小，但绘图表面不受影响。

Canvas 元素可以设计为两部分

  • 初始化 HTML5 Canvas 元素。

  • 在绘图表面上设计图形。

画布坐标

在绘制 Canvas 元素之前，我们必须了解画布坐标。画布由以高度和宽度作为属性的 HTML 代码启动的可绘制区域组成。Canvas 元素是一个二维矩形区域。canvas 元素的左上角被视为原点 (0,0)，其属性为宽度和高度。canvas元素的右下角是（画布宽度，画布高度），由用户指定。Canvas 元素的尺寸由用户使用 CSS 属性指定。如果没有给出宽度和高度，则默认设置为 (300,150)。

画布坐标

Canvas 元素的简单示例

这是绘制画布元素的基本代码片段。宽度和高度分别为 555px 和 555px。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Canvas Element</title>
</head>
<body>
   <canvas id="canvas" width="555" height="555" style="border:2px solid orange;">
   </canvas>
</body>
</html>

上述代码片段的输出是

画布元素

上面的代码片段帮助我们理解如何使用提供的属性来实现画布。

Canvas元素的应用

Canvas 配备了许多图形功能，在网络上有广泛的应用。Canvas 的一些主要应用是

  • HTML5 Canvas 可用于在网页上绘制文本。

  • canvas 元素用于开发高效的图形。

  • 我们可以使用画布元素设计简单的动画（例如闪闪发光的星星）到复杂的动画。

  • Canvas 元素可用于网站交互，因为它们可以响应 JavaScript 事件并响应用户操作。

  • Canvas 通常用于在网站上构建 2D 游戏。

历史

为移动应用程序和网页发明图形界面的想法最初是在 2000 年代初期提出的，许多组织已经开始研究解决这个问题。Canvas 元素的历史如下。

  • Canvas 是 Apple 于 2004 年为其产品开发最初引入的 HTML5 元素。

  • Apple 主要使用画布作为 Web 套件组件来改进 Safari 浏览器上的 UI 图形和仪表板小部件。

  • 后来由 Web 超文本应用技术工作组 (WHATWG) 标准化，该工作组是 HTML 和当今可用的下一代 Web 技术开发的幕后推手。

  • 以前，Canvas元素被用来制作在线2D游戏，因为它更有效，并且可用的图形功能对用户更有吸引力。

  • Canvas 是一个 HTML 元素，可以使用 JavaScript 动态生成 2D 形状和位图图像。此前，由于网站鼓励广告，JavaScript 给用户带来了很多问题，导致渲染问题。后来通过禁用浏览器中的 JavaScript 解决了这个问题，导致 Canvas 无法使用。如果用户想要在 Canvas 上工作，则必须手动启用 JavaScript。

  • 当今可用的浏览器支持 JavaScript。 HTML Canvas 是在网页内绘制图形数据（例如图形、图表和地图）的绝佳替代方案，这使得 Canvas 元素的使用更加容易。

  • HTML Canvas 是在网页内绘制图形数据（例如图形、图表和地图）的绝佳替代方案。今天它已被广泛使用。