HTML5支持哪些类型的图形?
原创图形是用于表示任何想法或想象力的视觉表示形式,以增强用户的网站整体体验。图形有助于以简单易懂的方式向用户传达复杂的信息。用图形表示信息的一些方法是通过照片、艺术、图表、流程图等。
HTML 中的图形用于增强网页或网站的外观并使用户交互变得简单。 HTML 中的图形有不同的用途,我们对此有不同的技术。我们将在下面讨论其中的一些。
SVG
SVG 代表可缩放矢量图形。它就像图形的 HTML 一样。 SVG 文件始终以 .svg 扩展名保存。
SVG 具有许多内置功能,例如渐变、不透明度、滤镜等,所有这些功能都可以为网页提供可扩展、平滑且可重用的图形。
立即学习“前端免费学习笔记(深入)”;
示例:使用 SVG 作为图像文件
<!DOCTYPE html> <html lang="en"> <head> <title>SVG</title> </head> <body> <h1>Below is an example of an svg used as an image.</h1> <img src="https://www.tutorialspoint.com/images/physics-tutorials_icon.svg" alt="SVG"> </body> </html>
示例2:使用SVG作为背景图片
<!DOCTYPE html> <html lang="en"> <head> <title>SVG</title> <style> body{ background: url("https://www.tutorialspoint.com/images/physics-tutorials_icon.svg") no-repeat; } </style> </head> <body> <p>This is Using SVG as background image</p> </body> </html>
示例 3:按原样使用 SVG
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="375.00078" height="728.17084" viewBox="0 0 375.00078 728.17084" xmlns:xlink="http://www.w3.org/1999/xlink" > <path d="M2.79045,484.29492c-.55273,0-1-.44727-1-1V201.5c0-70.91211,57.69043-128.60254,128.60254-128.60254h217.13771c.55273,0,1,.44727,1,1s-.44727,28-1,28l217.1377-27C60.58439,74.89746,3.79045,131.69141,3.79045,201.5V483.29492c0,.55273-.44727,1-1,1Z" fill="#3f3d56" /> <path d="M348.29044,0c.55273,0,1,.44727,1,1V282.79492c0,70.91211-57.69043,128.60254-128.60254,128.60254H3.55021c-.55273,0-1-.44727-1-1s.44727-1,1-1H220.68792c69.80861,0,126.60255-56.79395,126.60255-126.60254V1c0-.55273,.44727-1,1-1h-.00003Z" fill="#3f3d56"/> </body> </html>
CSS
CSS 代表层叠样式表。它是用于描述网页及其组件(如颜色、布局和字体信息)的呈现方式的语言。 CSS 文件以 .css 扩展名保存。
主要用于通过CSS属性修改HTML和SVG元素。 HTML 元素有几个内置的 CSS 属性,例如字体,我们有 font-size、fontwidth、font-weight。同样,对于其他元素,我们也有其他属性。所有这些属性应用于 HTML 和 SVG 元素时都会生成可扩展、简单且易于用户理解的网页。
示例
<!DOCTYPE html> <html lang="en"> <head> <title>CSS</title> <link rel="stylesheet" href="style.css"> <style> body{ background-image: url("image.jpg"); background-color:aqua; background-repeat: repeat; background-position: 0%; } h1{ color:black; border: 2px solid black; font-size: 50px; } p{ color:black; border:2px solid black; font-size: 50px; } </style> </head> <body> <h1>This is an exmaple of using CSS with HTML.</h1> <p>CSS helps in making the content and images of the webpage looks more simpler and presentable.</p> </body> </html>
画布 API
Canvas API 是一种客户端脚本技术,允许对光栅图像进行丰富的创建或修改。 Canvas API 使用基于矢量的方法来创建形状和其他图形效果,并且由于它没有 DOM(文档对象模型),因此可以更快地执行。
Canvas API 用于使用 javascript 和