HTML5的总结

最新推荐文章于 2022-07-26 15:08:45 发布

WildKingxue

最新推荐文章于 2022-07-26 15:08:45 发布

阅读量883

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/WildKingxue/article/details/119711133

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.HTML5的介绍

1.HTML5是什么

HTML5 是 HyperText Markup Language 5 的缩写

HTML5 是对HTML 标准的第五次修订，目前仍未完工。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。

而HTML5本身并非技术，而是标准。它所使用的技术早已很成熟，国内通常所说的html5实际上是html与css3及JavaScript和api等的一个组合，大概可以用以下公式说明：HTML5≈HTML+CSS3+JavaScript+API.

2.HTML5的背景介绍

W3C 全称是万维网协会（World Wide Web Consortium），是制定互联网标准的官方组织。

WHATWG 是一个非官方的，由包括来自 Mozilla、Google、Opera 等公司的员工组成的开源社区，是任何人都可以参与的。它对 HTML（前 HTML5 标准）、Web Workers API 等标准的制定和更新做出过很大贡献。

2006年，W3C表示有兴趣参与HTML 5.0的开发，并于2007年组建了一个工作组，专门与WHATWG合作开发HTML规范。HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。2012年中期，W3C推出了一个新的编辑团队，负责创建HTML 5.0推荐标准，并为下一个HTML版本准备工作草案。

3.HTML5改进

添加了新元素，新属性，完全支持 CSS3，Video 和 Audio，2D/3D 制图，本地存储，本地 SQL 数据，Web 应用等

二.HTML5比HTML的比较

在html5标准推出之前，开发者开发一个产品，需要针对PC端以及安卓端IOS端去撰写不同的代码，才能实现各个端展现相同的功能，方便用户在电脑和移动端上使用产品，没有违和感，后期维护的时候也需要分别各自维护，对于企业，这无疑是一个巨大的支出。

随着html5标准的出世，完全改变了这一现状，开发者不需要根据各个端去编写不同的代码了，在开发过程中不用去了解各个端的独特要求，只需要按照html5标准撰写就可以，符合了html5标准就可以在各端正常运行了，大大减少了开发者的重复劳动，对于企业也降低了开发以及运营、维护成本。

HTML5的优点：

新一代网络标准能够让程序通过Web浏览器，消费者从而能够从包括个人电脑、笔记本电脑、智能手机或平板电脑在内的任意终端访问相同的程序和基于云端的信息。

提高可用性和可维护性，改进了用户体验。
新增语义化标签，有助于开发人员定义清晰的结构。
可以播放视频音频，增加多媒体元素。
利用h5动画，友好地替代了flash和silverlight。
爬虫抓取网站的时候，对于SEO很友好。
H5被大量应用于移动应用和游戏开发。
可移植性好。

HTML5的缺点：

现在大多数高版本浏览器都支持html5，但是少部分的低版本浏览器目前不支持html5，因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳。

开放性带来的困扰
发展的速度有待提升
技术手段的不完善

三.HTML5的新特性

HTML5将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范。

1.用于绘画的 canvas 元素

2.用于媒介回放的 video 和 audio 元素

3.对本地离线存储的更好的支持

4.新的特殊内容元素，比如 article、footer、header、nav、section

5.新的表单控件，比如 calendar、date、time、email、url、search

四.HTML5的语义元素

元素的变化：

新的解析顺序新的元素：section， video， progress， nav， meter， time， aside， canvasinput

元素的新属性：日期和时间，email， url。

新的通用属性：ping， charset， async

全域属性：id， tabindex， repeat。

移除元素：center， font， strike。

1.新添加的元素

HTML5提供了新的元素来创建更好的页面结构：

<canvas>--标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
<audio>--定义音频内容
<video>--定义视频（video 或者 movie）
<source>--定义多媒体资源 <video> 和 <audio>
<embed>--定义嵌入的内容，比如插件。
<track>--为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
<datalist>--定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>--规定用于表单的密钥对生成器字段。
<output>--定义不同类型的输出，比如脚本的输出。
<article>--定义页面独立的内容区域。
<aside>--定义页面的侧边栏内容。
<bdi>--允许您设置一段文本，使其脱离其父元素的文本方向设置。
<details>--用于描述文档或文档某个部分的细节
<summary>--标签包含 details 元素的标题
<command>--定义命令按钮，比如单选按钮、复选框或按钮
<dialog>--定义对话框，比如提示框
<figure>--规定独立的流内容（图像、图表、照片、代码等等）
<figcaption>定义 <figure> 元素的标题
<footer>--定义 section 或 document 的页脚。
<header>--定义了文档的头部区域。
<meter>--定义度量衡。仅用于已知最大和最小值的度量。
<progress>--定义任何类型的任务的进度。
<main>--规定文档的主内容。
<mark>--定义带有记号的文本。
<ruby>--定义 ruby 注释（中文注音或字符）。
<rp>--在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<rt>--定义字符（中文注音或字符）的解释或发音。
<nav>--定义运行中的进度（进程）。
<section>--定义文档中的节（section、区段）。
<time>--定义日期或时间。
<wbr>--规定在文本中的何处适合添加换行符。

2.移除的元素

以下的 HTML 4.01 元素在HTML5中已经被删除：

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

五.常用的HTML5语义元素

1.figure元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>figure元素</title>
	</head>
	<body>
		<figure>
			<figcaption>这是我喜欢的</figcaption>
			<img src="../20210811html/img/微信图片_20210811180610.jpg" width="100px">
			<img src="../20210812html/img/微信图片_20210811180625.jpg" width="100px">
		</figure>
	</body>
</html>

2.article和section元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>article和section元素的运用</title>
	</head>
	<body>
		<article>
			<h2>购物</h2>
			<section>
				<h3>淘宝</h3>
				<p>使用淘宝购物东西种类多</p>
			</section>
			<section>
				<h3>京东</h3>
				<p>使用京东购物快递运输快</p>
			</section>
			<section>
				<h3>拼多多</h3>
				<p>使用拼多多购物价格相对便宜</p>
			</section>
		</article>
	</body>
</html>

3.header元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框架</title>
	</head>
	<body>
		<header style="background-color: darkseagreen;width: 100%;height: 50px;">
			&lt;header&gt;
		</header>
		<nav style="width: 100%;height: 50px;background-color: aqua;">
			&lt;nav&gt;
		</nav>
		<article style="float: left; width: 50%;height: 100px;background-color: blanchedalmond;">
			&lt;article&gt;
			<section style="width: 40%;height: 80px;background-color: red;">
				&lt;section&gt;
			</section>
		</article>
		<aside style="float: left; width: 50%;height: 100px;background-color: chartreuse;">
			&lt;aside&gt;
		</aside>
		<footer>
			<p>&copy;本作品由WildKingxue所提供。</p>
		</footer>
	</body>
</html>

4. nav元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏nav元素</title>
	</head>
	<body>
		<nav>
			<a href="#">天猫</a>&nbsp;&nbsp;&nbsp;
			<a href="#">聚划算</a>&nbsp;&nbsp;&nbsp;
			<a href="#">天猫超市</a>&nbsp;&nbsp;&nbsp;
			<a href="#">飞猪旅行</a>
		</nav>
	</body>
</html>

5.details和open元素

下图广东省则是给details元素定义了一个open元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>details元素</title>
	</head>
	<body>
		<details>
			<summary>陕西省</summary>
			<p>西安市</p>
			<p>咸阳市</p>
			<p>渭南市</p>
			<p>汉中市</p>
		</details>
		<details open="open">
			<summary>广东省</summary>
			<p>广东市</p>
			<p>深圳市</p>
			<p>佛山市</p>
			<p>东莞市</p>
		</details>
	</body>
</html>

details元素则如陕西省这样：

6.dialog元素

dialog元素需要JavaScript才能更好的体现出来。

简单的做个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dialog元素</title>
		<script type="text/javascript">
			function a() {
				var open = document.getElementById("b").open;
				if (open) {
					document.getElementById("b").open = "";
				} else {
					document.getElementById("b").open = "open";
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="请点击我" onclick="a();" />
		<dialog id="b" style="background-color: crimson;color: aliceblue;">
			我喜欢你
		</dialog>
	</body>
</html>

这块的地方则用到JavaScript

运行结果：

7. mark元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>mark元素</title>
	</head>
	<body>
		<p>我是一个<mark style="background-color: aqua; color: red;">前端</mark>工程师</p>
	</body>
</html>

8.进度测试

meter元素和progress元素

meter--定义度量衡。仅用于已知最大和最小值的度量。

progress--定义任何类型的任务的进度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>进度测试</title>
		<script type="text/javascript">
			function a() {
				var s = document.getElementById("s");
				var i = 0;
				window.setInterval(function() {
					s.value = i;
					i++;
				}, 300);
			}
		</script>
	</head>
	<body>
		<input type="button" name="mycs" value="进度测试" / onclick="a()">
		<meter value="55" min="1" max="100"></meter>
		<progress id="s"value="0" max="100"></progress>
	</body>
</html>

点击进度测试

它这个进度会随着你定义的速度，最大值来行走。

9.option元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控件下拉列表</title>
	</head>
	<body>
		<b>陕西省</b>
		<input list="d" name="xl" />
		<datalist id="d">
			<option value ="渭南"></option>
			<option value ="西安"></option>
			<option value ="咸阳"></option>
		</datalist>
	</body>
</html>

六.定义在input中的元素

1.datetime-local

datetime-local是显示时间的表单元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时间表单</title>
	</head>
	<body>
		<b>时间</b>
		<input type="datetime-local" name="sj" />
	</body>
</html>

2.number

number是显示数字的表单元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数字表单</title>
	</head>
	<body>
		<b>请确定数量</b>
		<input type="number" name="sl" max="10" min="1"/>
	</body>
</html>

3. range

range是显示进度多少的表单元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数值变化</title>
	</head>
	<body>
		<b>例如：</b>
		<b>声音</b>
		<!--<input type="range" name="sy" max="100%" min="1%"/>-->
		<input type="range" name="sy" max="100" min="1" value="15"/>
	</body>
</html>

4.week

week是显示周期的表单元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>周期表单</title>
	</head>
	<body>
		<b>今天是第几周？</b><br>
		<input type="week" name="zq" />
	</body>
</html>

5.required

required--在提交之前填写输入域（不能为空）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>required</title>
	</head>
	<body>
		<h3>required--在提交之前填写输入域（不能为空）</h3>
		<form action="#" method="post">
			<input type="texr" name="zh"required placeholder="请输入用户名" /><br>
			<input type="password" name="mm"required placeholder="请输入密码" /><br>
			<input type="submit" value="登录"/>
		</form>
	</body>
</html>

为空的话会提交不上去。

6.placeholder

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>placeholder的使用</title>
	</head>
	<body>
		<input type="text" name="mm" placeholder="请输入文字"/>
	</body>
</html>

7.pattern

pattern在代码所定义一个范围，那么在网页中只能在这个范围中取值，反之会提交不了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>pattern取值范围</title>
	</head>
	<body>
		<form action="1-2.html" method="get">
			用户名:<input type="text" name="yhm"pattern="0-9" required />
			<input type="submit" value="登录"/>
		</form>
	</body>
</html>

这些是大多数常用的，肯定还有。如果还有其他常用的，请大家一起探讨探讨。

七.Video(视频)

大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

video(视频)路径，也分为三种【相对路径，绝对路径，网络路径】

video元素支持三种视频格式：MP4,WebM,和Ogg。

相对路径：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5 Video</title>
	</head>
	<body>
		<h3>陈硕子演出视频</h3>
		<!--相对路径-->
		<video width="800" height="600"controls="controls">
			<source src="video/chenshuozi.mp4" type="video/mp4"></source>	
		</video>
	</body>
</html>

绝对路径：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5 Video</title>
	</head>
	<body>
		<h3>陈硕子演出短视频</h3>
		<!--绝对路径-->
		<video width="600" height="400" controls="controls">
			<source src="E:\shipin\chenshuozi1.mp4" type="video/mp4"></source>
		</video>
	</body>
</html>

网络路径基本不用：在这不举例说明。

video--视频窗口

type--文件类型

width/height--属性设置视频窗口初始化大小

controls--属性设置视频播放的控制器

source--子元素设置被播放的资源

src--视频资源路径

八.Audio(音频)

大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

audio（音频）路径，也分为三种【相对路径，绝对路径，网络路径】

audio元素支持三种音频格式文件: MP3, Wav, 和 Ogg。

相对路径：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5 audio</title>
	</head>
	<body>
		<h3>一首说唱唱出你的心声</h3>
		<!--相对路径-->
		<audio controls="controls">
			<source src="video/1.mp3" type="audio/mp3"></source>
		</audio>
	</body>
</html>

绝对路径：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5 audio</title>
	</head>
	<body>
		<h3>一首陈硕子歌曲</h3>
		<!--绝对路径-->
		<!--autoplay谷歌浏览器现已不支持，可用其他浏览器试试-->
		<!--loop循环播放，4为四次-->
		<audio controls="controls"  loop="4">
			<source src="C:\Users\14397\Music\chenshuozi.mp3" type="audio/mp3">
			</source>
		</audio>
	</body>
</html>

网络路径不举例说明。

source--子元素表示被播放的音频资源

controls--设置控制器

src--音频资源路径

type--文件类型

loop--设置循环播放

九.Web 存储

1.什么是 HTML5 Web 存储?

HTML5 web 存储,一个比cookie更好的本地存储方式。

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。cookie浏览器自带的存储空间，每一个cookie可以存4k。cookie本地存储不安全，但是Web 存储需要更加的安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。

2. HTML5 Web 存储有2种方式

localStorage和sessionStorage

共同点：localStorage和sessionStorage都允许在浏览器端储存数据

不同点：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

3.localStorage和sessionStorage的使用方法

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage。

if(typeof(Storage)!=="undefined") {

// 是的! 支持 localStorage或sessionStorage 对象! // 代码.....

} else {

// 抱歉! 不支持 web 存储。

}

(1).localStorage使用方法

localStorage 对象存储的数据没有时间限制。不论什么时间，数据依然可用。

localStorage有两种方式:
localStorage.变量名称="数据值"; 获取保存的数据值:localStorage.变量名称;
localStorage.setItem("名称","数据值"); 获取保存的数据值:localStorage.getItem("名称");

手动删除localStorage对象中存储的数据:
localStorage.removeItem("名称");删除指定的数据
localStorage.clear(); 删除所有数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>localStorage</title>
		<script>
			function myka() {
				var mytextobj = document.getElementById("mytext");
				var passwordobj = document.getElementById("password");
				var spanObj = document.getElementById("span");
				var mytext = mytextobj.value;
				var Pass = passwordobj.value;
				if (mytext == "Wildkingxue" && Pass == "123321qwert") {
					if (typeof(Storage) !== "undefined") {
						localStorage.setItem("mytext", mytext);
					} else {
						alert("不支持,localStorage");
					}
					window.location.href = "3-3.html";
				} else {
					spanObj.innerHTML = "用户名密码有误,请重新输入！";
				}
			}
		</script>
	</head>
	<body>
		<span id="span"></span><br>
		<input type="text" id="mytext" /><br>
		<input type="password" id="password" /><br>
		<input type="button" value="登录" onclick="myka();" />
	</body>
</html>

上述页面登录后要跳转到另一个页面，这里应该还需下面这个页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登陆成功</title>
		<script>
			window.onload=function(){
				var hobj=document.getElementById("h1");
				if(typeof(Storage)!=="undefined") {				
					var myval=localStorage.getItem("mytext");
					hobj.innerHTML=myval+",登陆成功";
				 } else { 
					alert("不支持,localStorage");
				}
			}
			function myexit(){
				if(typeof(Storage)!=="undefined") {
					localStorage.clear();
					window.location.href="3-3.html";
				 } else { 
					alert("不支持,localStorage");
				}
			}
		</script>
	</head>
	<body>
		<h1 id="h1">登陆成功</h1>
		<input type="button" value="退出" onclick="myexit();"/>
	</body>
</html>

输入你设置的账号密码，点击登录。

(2).sessionStorage使用方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

sessionStorage有两种方式:
sessionStorage.变量名称="数据值"; 获取保存的数据值:sessionStorage.变量名称;
sessionStorage.setItem("名称","数据值"); 获取保存的数据值:sessionStorage.getItem("名称");

手动删除sessionStorage对象中存储的数据:
sessionStorage.removeItem("名称");删除指定的数据
sessionStorage.clear(); 删除所有数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>sessionStorage 对象</title>
		<script>
			function testButCount() {
				if (typeof(Storage) !== "undefined") {
					if (sessionStorage.getItem("clickcount")) {
						sessionStorage.setItem("clickcount", Number(sessionStorage.getItem("clickcount"))+1);
						}
						else {
							sessionStorage.setItem("clickcount", 1);
						}
						document.getElementById("h4").innerHTML = "你已经点击了该按钮 " + sessionStorage.getItem("clickcount") + " 次 ";
					} else {
						alert("不支持sessionStorage对象");
					}
				}
		</script>
	</head>
	<body>
		<h1>sessionStorage 对象</h1>
		<h2>实例:点击该按钮查看计数器的增加。</h2>
		<input type="button" value="测试按钮的点击次数" onclick="testButCount();" /><br>
		<h4 id="h4"></h4>
	</body>
</html>

每点击一次按钮，下方数字会在当前次数上+1。

4.localStorage和sessionStorage区别

(1). localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

(2).localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

(3).sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

(4).它们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

(5).不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

(6).localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

(7). sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同

一窗口（也就是浏览器的标签页）下。

十.HTML5 Canvas

1.什么是 Canvas?

Canvas标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

Canvas--就是在html中开辟出来的绘制图形的空间【画布】。

通过style来设置一些样式。

通过javascript在canvas画布上绘制图形。

2.Canvas矩形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas矩形</title>
		<script type="text/javascript">
		//setRect矩形命名
			function setRect() {
				var canvasobj = document.getElementById("canvas1");
				//创建 context 对象--画笔
				var con = canvasobj.getContext("2d");
				//yanse
				con.fillStyle = "pink";
				//x=1，y=1，w=50，h=100
				con.fillRect(1,1,50,100);
				}
		</script>
	</head>
	<body>
		<input type="button" value="绘制矩形" onclick="setRect();"/><br>
		<canvas id="canvas1" style="width: 400px; height: 400px; border: 1px solid red;"></canvas>
	</body>
</html>

3.Canvas圆形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas圆形</title>
		<script type="text/javascript">
			function setarc() {
				var canvasobj = document.getElementById("canvas1");
				//创建 context 对象--画笔
				var con = canvasobj.getContext("2d");
				con.beginPath();
				con.arc(75, 75,60, 3, 3* Math.PI);
				con.stroke();
			}
		</script>
	</head>
	<body>
		<input type="button" value="绘制圆型" onclick="setarc();" /><br>
		<canvas id="canvas1" style="width: 400px; height: 400px; border: 1px solid red;"></canvas>
	</body>
</html>

4.Canvas线形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas线</title>
		<script type="text/javascript">
		function link(){
			var c=document.getElementById("myCanvas");
			var ctx=c.getContext("2d");
			ctx.moveTo(10,10);
			ctx.lineTo(200,100);
			ctx.stroke();
		}
		</script>
	</head>
	<body>
		<input type="button" value="绘制线" onclick="link();" /><br>
		<canvas id="myCanvas" style="width: 400px; height: 400px; border: 1px solid red;"></canvas>
	</body>
</html>

5.Canvas文字

使用 canvas 绘制文本，重要的属性和方法如下：

font - 定义字体

fillText(text,x,y) - 在 canvas 上绘制实心的文本

strokeText(text,x,y) - 在 canvas 上绘制空心的文本

fillText方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas文字</title>
		<script>
		function wenzi(){
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.font = "30px Arial";
			//fillText(text,x,y) - 在 canvas 上绘制实心的文本
			//strokeText(text,x,y) - 在 canvas 上绘制空心的文本
			ctx.fillText("l LOVE You", 10, 50);
			//ctx.strokeText("l LOVE You", 10, 50);
		}
		</script>
	</head>
	<body>
		<input type="button" value="文字" onclick="wenzi();" /><br>
		<canvas id="myCanvas" width="200" height="100" style="border:1px solid blueviolet;"></canvas>
	</body>
</html>

strokeText方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas文字</title>
		<script>
		function wenzi(){
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.font = "30px Arial";
			//fillText(text,x,y) - 在 canvas 上绘制实心的文本
			//strokeText(text,x,y) - 在 canvas 上绘制空心的文本
			//ctx.fillText("l LOVE You", 10, 50);
			ctx.strokeText("l LOVE You", 10, 50);
		}
		</script>
	</head>
	<body>
		<input type="button" value="绘制线" onclick="wenzi();" /><br>
		<canvas id="myCanvas" width="200" height="100" style="border:1px solid blueviolet;"></canvas>
	</body>
</html>

6.Canvas图像

把一幅图像放置到画布上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas图像</title>
		<script>
		function wenzi(){
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			var img = document.getElementById("scream");
			//img.onload = function wenzi(){
				ctx.drawImage(img, 0, 0);
		}
		</script>
	</head>
	<body>
		<h2>drawImage(image,x,y)</h2>
		<p>Image to use:</p>
		<img id="scream" src="img\1.jpg" alt="The Scream" width="220" height="277" >
		<p>Canvas:</p>
		<input type="button" value="图像" onclick="wenzi();" /><br>
		<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
	</body>
</html>

7.Canvas渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变。

createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变。

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。

createLinearGradient(x,y,x1,y1)：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas-渐变</title>
		<script>
			function myjb() {
				var c = document.getElementById("myCanvas");
				var ctx = c.getContext("2d");
				// Create gradient
				var grd = ctx.createLinearGradient(0, 0, 200, 0);
				grd.addColorStop(0, "red");
				grd.addColorStop(1, "white");
				// Fill with gradient
				ctx.fillStyle = grd;
				ctx.fillRect(10, 10, 150, 80);
			}
		</script>
	</head>
	<body>
		<h2>createLinearGradient(x,y,x1,y1) - 创建线条渐变</h2>
		<input type="button" value="显示" onclick="myjb();" /><br>
		<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
	</body>
</html>

createRadialGradient(x,y,r,x1,y1,r1)：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas-渐变</title>
		<script>
		    function myjb(){
				var c = document.getElementById("myCanvas");
				var ctx = c.getContext("2d");
				// Create gradient
				var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
				grd.addColorStop(0, "red");
				grd.addColorStop(1, "white");
				// Fill with gradient
				ctx.fillStyle = grd;
				ctx.fillRect(10, 10, 150, 80);
			}
		</script>
	</head>
	<body>
		<h2>createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变</h2>
		<input type="button" value="显示" onclick="myjb();" /><br>
		<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
	</body>
</html>

WildKingxue

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5的总结

一.HTML5的介绍1.HTML5是什么HTML5 是HyperText Markup Language 5 的缩写HTML5 是对HTML 标准的第五次修订，目前仍未完工。然而，大部分现代浏览器已经具备了某些 HTML5 支持。HTML5主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入。而HTML5本身并非技术，而是标准。它所使用的技术早已很成熟，国内通常所说的html5实际上是html与css3及JavaScript和api等的一个组合，大.
复制链接

扫一扫