HTML Canvas - 简介

上一页
下一页

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

Canvas 元素只是图形的基本矩形容器，通常使用 JavaScript 完成。Canvas 元素内的形状或任何其他图形实现可以使用 JavaScript 完成。HTML Canvas 元素是一个像 div、a 或 table 这样的 HTML 标签，区别在于其内容使用 JavaScript 渲染。

为什么选择 Canvas？

如今，有超过 12 亿个网站彼此之间独一无二，并且涉及各种功能。canvas 元素专门设计用于创建可唯一应用于开发网站 UI 并使其对用户更具吸引力的视觉内容。它非常容易学习，只需要具备 HTML 和 JavaScript 的知识基础。

Canvas 和 <img> 标签？

乍一看，canvas 元素类似于 HTML5 图像 <img> 元素，除了没有“src”和“alt”属性。与图像元素不同，canvas 元素需要结束标签。canvas 元素只有两个属性，即宽度和高度。要使用 Canvas 设计图形，我们必须使用 JavaScript。

Canvas 的尺寸

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

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

Canvas 元素和 Canvas 上下文

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

Canvas 元素的结构

一个简单的 <canvas> 元素使用属性 id、width、height 和 style 来定义，以便观察 canvas 的边框。这里要识别的主要内容是，如果不给 canvas 任何样式，即使它形成了，也无法在网页上观察到它。下面显示了一个简单的 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>

使用 id 或 class 识别 canvas 元素，以便将来使用 JavaScript 在其中渲染图形。在上面的示例中，构建了一个尺寸为 555×555 且边框颜色为黑色的 canvas。当发生导致 canvas 未显示的错误时，canvas 标签之间插入的句子将显示。页面上显示的文本使用户识别 canvas 显示时存在错误。canvas 轮廓如下所示。

s\\Structure of Canvas Element

HTML5 Canvas 与可缩放矢量图形 (SVG)

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

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

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

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

canvas 元素有两个大小。第一个是元素本身的大小，可以通过更改元素的 width 和 height 属性来更改。

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

Canvas 元素可以分为两个部分设计

  • 初始化 HTML5 Canvas 元素。

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

Canvas 坐标

在绘制 Canvas 元素之前，我们必须了解 canvas 坐标。canvas 包含一个在 HTML 代码中初始化的可绘制区域，该区域具有宽度和高度作为属性。Canvas 元素是一个二维矩形区域。canvas 元素的左上角被视为原点 (0,0)，其中属性为宽度和高度。canvas 元素的右下角为 (canvas 宽度，canvas 高度)，由用户给出。Canvas 元素的尺寸由用户使用 CSS 属性给出。如果未给出，则默认设置为 (300,150)。

canvas coordinates

Canvas 元素的简单示例

这是一个绘制 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 Element

上面的代码片段帮助我们了解如何使用提供的属性实现 canvas。

Canvas 元素的应用

Canvas 拥有许多图形功能，在网络上具有广泛的应用。Canvas 的一些主要应用包括

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

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

  • 我们可以使用 canvas 元素设计从闪烁的星星到复杂动画的简单动画。

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

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

历史

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

  • Canvas 是一个 HTML5 元素，最初由 Apple 于 2004 年引入，用于开发其产品。

  • Apple 主要将 canvas 用于 WebKit 组件，以改进 Safari 浏览器上的 UI 图形和仪表板小部件。

  • 后来它由 Web 超文本应用程序技术工作组 (WHATWG) 标准化，该工作组负责开发 HTML 和当今可用的下一代 Web 技术。

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

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

  • 如今可用的浏览器都启用了 JavaScript，HTML Canvas 是在网页内绘制图形数据（如图表、图表和地图）的一个很好的替代方案，这使得使用 Canvas 元素变得更容易。

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

打印页面

上一页
下一页
广告