HTML5中的图形解释

在本文中，我们将解释 HTML5 中图形的概念。图形是用于使网页或应用程序具有视觉吸引力以及改善用户体验和用户交互的表示形式。图形的一些示例是照片、流程图、条形图、地图、工程图、建筑蓝图等。 通常，在具有 HTML5 Canvas API、WebCGM、CSS、SVG、PNG、JPG 等的 Web 图形中使用以下技术。

SVG（可缩放矢量图形）

• 这些是由标记语言创建的图像，它们是可重复使用的、简单的、高质量的独立图像，也可以导出和导入。
• 它们是跨浏览器友好的，可以在应用程序的客户端和服务器端使用。
• 通过编辑标记语言或使用样式表进行编辑，可以操作它们来创建动画、混合图像等。
• 文件带有 .svg 扩展名。

示例：以下以标记形式演示 SVG。

HTML

输出：

SVG 文本

PNG（便携式网络图形）

• 它们是便携式、静态和无损的，具有适当的索引颜色控制。
• 文件带有 .png 或 .PNG 扩展名。
• 跨浏览器友好并具有流媒体功能。

例子：

输出：

JPG 或 JPEG（联合图像专家组）

• 有损压缩，压缩程度可调。
• 主要用于数字形体，可实现 10:1 的压缩。
• 文件带有 .jpg 或 jpeg 扩展名。

例子：

输出：

CSS（层叠样式表）：

• 这是一种主要用于通过使用代码来设计 HTML 和 SVG 元素的语言。
• 它们是可扩展的，为用户提供更多的创造力空间。
• 文件通常带有 .css 扩展名。

例子：

style.css：上面的HTML文件中使用了以下代码。

body {
  position: relative;
}

.star {
  position: absolute;
  width: 423px;
  height: 384px;
  left: 456.7px;
  top: 80.34px;
  background: #346d33;
  transform: rotate(18.69deg);
}

输出：

画布API：

• 没有 DOM 并使用基于矢量的方法来创建对象、图形和形状。
• Canvas API 应用程序可以是独立的，也可以与 HTML 或 SVG 集成。
• 广泛用于游戏
• 具有原生现代浏览器支持的客户端脚本。

例子：

HTML

    
    
       



    Your browser does not support the canvas element.

输出：

WebCGM（网络计算机图形元文件）

• 在图形功能方面与 SVG 非常相似。
• CGM 是矢量图像定义的 ISO 标准。
• 用于航空、汽车工程、技术插图等。
• 它们在传统上没有被广泛使用。更现代的方法是使用 SVG、Canvas 等。

因此，图形用于制作网页、应用程序或任何需要视觉交互的数字元素，尤其是基于 HTML5，需要图形以获得最佳用户体验。