H5学习笔记

什么是HTML:

HTML是HyperText Markup Language的缩写，翻译成中文是超文本标记语言，用于网页的创建。

头部标签

H5视频

检测您的浏览器是否支持 HTML5 视频：

<div id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0;">
		<button onclick="checkVideo()" style="font-family:Arial, Helvetica, sans-serif;">Check</button>
</div>
		

function checkVideo()
		{
		if(!!document.createElement('video').canPlayType)
		  {
		  var vidTest=document.createElement("video");
		  oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
		  if (!oggTest)
		    {
		    h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
		    if (!h264Test)
		      {
		      document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
		      }
		    else
		      {
		      if (h264Test=="probably")
		        {
		        document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
		        }
		      else
		        {
		        document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
		        }
		      }
		    }
		  else
		    {
		    if (oggTest=="probably")
		      {
		      document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
		      }
		    else
		      {
		      document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
		      }
		    }
		  }
		else
		  {
		  document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
		  }
		}

播放视频

<h1>视频</h1>
	<video id="video2" src="C:\Users\Administrator\Desktop\MyVueDemo\htmldemo\Music\canghaiqingzhou.mp4" width="800" height="440" controls="controls" >
	</video>

/* 获取视频节点 */
		var myVideo2=document.getElementById("video2");
		/* 视频时长发生变法时，触发 */
		myVideo2.ondurationchange=alert("The video duration has changed");
		

video标签的属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

HTML5 - 使用 DOM 进行控制

<div style="text-align:center;float: right;">
		  <button onclick="playPause()">播放/暂停</button> 
		  <button onclick="makeBig()">放大</button>
		  <button onclick="makeNormal()">还原</button>
		  <button onclick="makeSmall()">变小</button>
		<!-- 视频事件 -->
		<video id="video1" style="margin-top: 10px;" 
		src="C:/Users/Administrator/Desktop/MyVueDemo/htmldemo/Music/chengshizhiguangmv.mp4" 
		width="800" height="440"  >
			
		</video>
		</div>

/* 获取视频节点 */
		var myVideo=document.getElementById("video1");
		/* 播放暂停 */
		function playPause()
		{ 
		if (myVideo.paused) 
		  myVideo.play(); 
		else 
		  myVideo.pause(); 
		} 
		/* 放大 */
		function makeBig()
		{ 
		myVideo.width=1000; 
		myVideo.height=600;
		} 
		/* 放小 */
		function makeSmall()
		{ 
		myVideo.width=400; 
		myVideo.height=200;
		} 
		//不变
		function makeNormal()
		{ 
		myVideo.width=800; 
		myVideo.height=440;
		} 

H5音频

audio 标签属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

<audio controls="controls">
		  <source src="Music/chengshizhiguang.mp3" type="audio/mpeg">
		</audio>

H5拖放

支持拖放需要做的一些事情

draggable=“true”：设置到需要拖动的对象上
ondragstart：在拖动的对象上设置一些属性值，
allowDrop：需要放到何处
实例：

 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
			<img src="img/hm.jpg" style="width: 100px;height: 50px;" draggable="true" 
			ondragstart="drag(event)" id="drag1" />
		</div>
		<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		

    /* 拖放 */
		function allowDrop(ev){
		避免浏览器对数据的默认处理
			ev.preventDefault();
		}
		拖放时设置类型和id
		function drag(ev){
		    设置被拖的数据
			ev.dataTransfer.setData('Text',ev.target.id)
		}
		被拖数据时，发生 drop 事件。
		function drop(ev){
		     获得被拖的数据
			var data=ev.dataTransfer.getData("Text");
			把被拖元素追加到放置元素
			ev.target.appendChild(document.getElementById(data));
		}

H5Web存储

提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

第一个介绍localStorage ： localStorage 支持5M

1、localStorage存储的值均为String 字符串
2、把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。音乐也是
3、在浏览器的隐私模式下不可用
4、爬虫无法读取localStorage
5、无法跨域
6、一直有效，客户不主动清空，那么数据一直在

setItem(string key,string data)插入数据入参：

//判断浏览器是否支持localstorage
			function ompatibility(){
				if(!window.localStorage){
					alert(1);
					document.getElementById("btn1").innerHTML="对不起。不支持localStorage."
				}else{
					alert("0");
					document.getElementById("btn1").innerHTML="开始浪"
				}
				
			}
			<!-- 增删改差 -->
			//获取localStorage对象
			var localStor=window.localStorage;
			//写入数据
			localStor.setItem("key",1);
			//读取数据
			var yanginfo=localStor.getItem("Key");
			alert(yanginfo);
			//更新
			localStor.setItem("key","{'姓名':'明','年龄'：'28'}");
			var yanginfo=localStor.getItem("Key");
			alert(yanginfo);
			//删除
			localStor.removeItem("Key");
			localStor.clear();

第二个介绍sessionStorage ：

1、只要不关闭页面数据就会存在客户端中
2、关闭页面数据清除

　//更新
function update() {
    window.sessionStorage.setItem(key, value);
}
//获取
function get() {
    window.sessionStorage.getItem(key);
}
//删除
function remove() {
    window.sessionStorage.removeItem(key);
}
//清空所有数据
function clear() {
    window.sessionStorage.clear();
}
 //获取sessionStorage
			  var storage = window.sessionStorage;  
			  //设置session值
			  storage.setItem('name',"明");
			  //获取seeion值
			  alert(storage.getItem('name'));
			  //更新session值
			  storage.setItem('name','雷砸');
			 storage.removeItem('name');

H5应用缓存

1、缓存意味着，可以解决重复加载，可以离线状态也能访问
2、减少服务器负载
3、提交服务响应速度
4、部分浏览器（如IE8-）不支持HTML5离线缓存；
缓存实例：

<!DOCTYPE HTML>
<html manifest="/**/demo.appcache">

<body>
The content of the document......
</body>

</html>

以上包含包含 manifest 属性，则页面会被缓存 manifest 文件需要配置正确的 MIME-type，即
“text/cache-manifest”。必须在 web 服务器上进行配置。
demo.appcache:需要缓存及其他操作的文件

Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

1、CACHE MANIFEST

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

CACHE MANIFEST：标识因被缓存文件
当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件，网络断开后，该文件依然可以离线可用

2、NETWORK：标识因过滤文件
NETWORK:
login.asp
NETWORK：用来标识改文件不被缓存的文件
login.asp：这个文件就不被缓存，所以离线即失效，*：代表所有文件
3、FALLBACK：标识服务建立连接，则用一下文件代替
FALLBACK:
/html5/ /404.html
第一个 URI 是资源，第二个是替补。

完整的 Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

H5画布SVG

1、什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

2、创建SVG元素

<svg>      </svg>

3、SVG标签

标签	作用	注释
polygon	创建含有不少于三个边的图形	列子：points=“100,10 40,180 190,60 10, 60 160,180” 分别代表五个坐标
rect	创建矩形
ellipse	元素是用来创建一个椭圆
circle	创建一个圆
line	创建一个直线	x1 属性在 x 轴定义线条的开始；y1 属性在 y 轴定义线条的开始；x2 属性在 x 轴定义线条的结束；y2 属性在 y 轴定义线条的结束
polyline	折线
path	定义一个路径	用于路径数据：移动 M = moveto；线到L = lineto；水平线H = horizontal lineto；垂直线V = vertical lineto；曲线到C = curveto；平滑曲线S = smooth curveto；二次贝塞尔曲线Q = quadratic Bézier curve；光滑二次贝塞尔曲线T = smooth quadratic Bézier curveto；椭圆弧A = elliptical Arc ；封闭路径Z = closepath；大写表示绝对定位，小写表示相对定位
text	定义文本

style:定义css属性、css中：fill属性定义填充颜色，stroke-width:定义矩形边框的宽度，stroke:定义矩形边框的颜色
x 属性定义矩形的左侧位置；y 属性定义矩形的顶端位置
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity： 属性定义轮廓颜色的透明度
rx 和 ry 属性可使矩形产生圆角。
r属性定义圆的半径
Stroke：定义一条线，文本或元素轮廓颜色
Tstroke- width：定义了一条线，文本或元素轮廓厚度：
stroke-linecap： 定义不同类型的开放路径的终结
stroke-dasharray ：创建虚线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>H5画布SVG</title>
	</head>
	<body>
		<h1> 绘制矢量图标：</h1>
		<svg xmlns="http://www.w3.org/2000/svg333" version="1.1" height="190">
			<!-- 五角星 -->
			<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
			<!-- 爱心 -->
			<defs>
				<rect id="a" y="54" width="60" height="25" rx="1" />
				<mask id="b" x="0" y="0" width="60" height="25" fill="#fff">
					<use xlink:href="#a" />
				</mask>
			</defs>
			<g transform="translate(-9 -56)" fill="none" fill-rule="evenodd">
				<use stroke="#EDEEEF" mask="url(#b)" stroke-width="2" xlink:href="#a" />
				<path d="M19.05 62.797c-.208-.268-1.776-2.188-3.629-1.725-.662.165-1.439.44-2.009 1.463-2.18 3.913 4.965 8.983 5.615 9.433V72l.023-.016.023.016v-.032c.65-.45 7.795-5.52 5.615-9.433-.57-1.023-1.347-1.298-2.009-1.463-1.853-.463-3.42 1.457-3.629 1.725z"
				 fill="red" />
			</g>
		</svg>
		<svg>
			<!-- 长方形 -->
			<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			<!-- 圆形 -->
			<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
		</svg>

		<!--椭圆 -->
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
			<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
			<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
		</svg>
		<br />
		<!-- 直线-->
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
		</svg>
		<!-- 折线-->
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
		</svg>
		<br />
		<!-- 路径图-->
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			<path d="M150 0 L75 200 L225 200 Z" />
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
			<path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
			<path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
			<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
			<!-- Mark relevant points -->
			<g stroke="black" stroke-width="3" fill="black">
				<circle id="pointA" cx="100" cy="350" r="3" />
				<circle id="pointB" cx="250" cy="50" r="3" />
				<circle id="pointC" cx="400" cy="350" r="3" />
			</g>
			<!-- Label the points -->
			<g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
				<text x="100" y="350" dx="-30">A</text>
				<text x="250" y="50" dy="-10">B</text>
				<text x="400" y="350" dx="30">C</text>
			</g>
		</svg>
		<!-- SVG文本-->
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
			<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
				<text x="0" y="15" fill="blue">I love SVG</text>
			</a>
		</svg>
		<!-- stroke /stroke-width/stroke-linecap/stroke-dasharray -->
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			<g fill="none">
				<path stroke="red" d="M5 20 l215 0" />
				<path stroke="blue" d="M5 40 l215 0" />
				<path stroke="black" d="M5 60 l215 0" />
			</g>
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

			<g fill="none" stroke="black">
				<path stroke-width="2" d="M5 20 l215 0" />
				<path stroke-width="4" d="M5 40 l215 0" />
				<path stroke-width="6" d="M5 60 l215 0" />


			</g>
		</svg>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

			<g fill="none" stroke="black" stroke-width="6">
				<path stroke-linecap="butt" d="M5 20 l215 0" />
				<path stroke-linecap="round" d="M5 40 l215 0" />
				<path stroke-linecap="square" d="M5 60 l215 0" />
				<path stroke-dasharray="5,5" d="M5 20 l215 0" />
				<path stroke-dasharray="10,10" d="M5 40 l215 0" />
				<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
			</g>
		</svg>
		<!-- 组合标签：实现文本图标颜色渐变-->
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			<defs>
				<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
					<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
					<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
				</linearGradient>
			</defs>
			<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
			<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
				SVG</text>
		</svg>
		<!-- 放射性渐变-->
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			<defs>
				<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
					<stop offset="0%" style="stop-color:rgb(255,255,255);
		        stop-opacity:0" />
					<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
				</radialGradient>
			</defs>
			<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
		</svg>
	</body>
</html>

H5画布canvas

什么是 Canvas？

1、HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
2、画布是一个矩形区域，您可以控制其每一像素。
3、canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

属性	值	描述
height	pixels	设置 canvas 的高度。
width	pixels	设置 canvas 的宽度。

全局属性：

accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名（引用样式表中的类）。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。

事件属性：

onafterprint script 文档打印之后运行的脚本。
onbeforeprint script 文档打印之前运行的脚本。
onbeforeunload script 文档卸载之前运行的脚本。
onerror script 在错误发生时运行的脚本。
onhaschange script 当文档已改变时运行的脚本。
onload script 页面结束加载之后触发。
onmessage script 在消息被触发时运行的脚本。
onoffline script 当文档离线时运行的脚本。
ononline script 当文档上线时运行的脚本。
onpagehide script 当窗口隐藏时运行的脚本。
onpageshow script 当窗口成为可见时运行的脚本。
onpopstate script 当窗口历史记录改变时运行的脚本。
onredo script 当文档执行撤销（redo）时运行的脚本。
onresize script 当浏览器窗口被调整大小时触发。
onstorage script 在 Web Storage 区域更新后运行的脚本。
onundo script 在文档执行 undo 时运行的脚本。
onunload script 一旦页面已下载时触发（或者浏览器窗口已被关闭）。

颜色、样式和阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式
shadowColor	设置或返回用于阴影的颜色
shadowBlur	设置或返回用于阴影的模糊级别
shadowOffsetX	设置或返回阴影距形状的水平距离
shadowOffsetY	设置或返回阴影距形状的垂直距离

方法	描述
createLinearGradient()	创建线性渐变（用在画布内容上）
createPattern()	在指定的方向上重复指定的元素
createRadialGradient()	创建放射状/环形的渐变（用在画布内容上）
addColorStop()	规定渐变对象中的颜色和停止位置

线条样式

属性	描述
lineCap	设置或返回线条的结束端点样式
lineJoin	设置或返回两条线相交时，所创建的拐角类型
lineWidth	设置或返回当前的线条宽度
miterLimit	设置或返回最大斜接长度

矩形

方法	描述
rect()	创建矩形
fillRect()	绘制“被填充”的矩形
strokeRect()	绘制矩形（无填充）
clearRect()	在给定的矩形内清除指定的像素

路径

方法	描述
fill()	填充当前绘图（路径）
stroke()	绘制已定义的路径
beginPath()	起始一条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip()	从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()	创建二次贝塞尔曲线
bezierCurveTo()	创建三次方贝塞尔曲线
arc()	创建弧/曲线（用于创建圆形或部分圆）
arcTo()	创建两切线之间的弧/曲线
isPointInPath()	如果指定的点位于当前路径中，则返回 true，否则返回 false

转换

方法	描述
scale()	缩放当前绘图至更大或更小
rotate()	旋转当前绘图
translate()	重新映射画布上的 (0,0) 位置
transform()	替换绘图的当前转换矩阵
setTransform()	将当前转换重置为单位矩阵。然后运行 transform()

文本

属性	描述
font	设置或返回文本内容的当前字体属性
textAlign	设置或返回文本内容的当前对齐方式
textBaseline	设置或返回在绘制文本时使用的当前文本基线
方法	描述
–	–
fillText()	在画布上绘制“被填充的”文本
strokeText()	在画布上绘制文本（无填充）
measureText()	返回包含指定文本宽度的对象

图像绘制

方法	描述
drawImage()	向画布上绘制图像、画布或视频

像素操作

属性	描述
width	返回 ImageData 对象的宽度
height	返回 ImageData 对象的高度
data	返回一个对象，其包含指定的 ImageData 对象的图像数据

方法	描述
createImageData()	创建新的、空白的 ImageData 对象
getImageData()	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData()	把图像数据（从指定的 ImageData 对象）放回画布上

合成

属性	描述
globalAlpha	设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation	设置或返回新图像如何绘制到已有的图像上

画图秀秀

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 绘制一个红色长方形，添加坐标值-->
		<canvas id="myCanvas" width="200px" height="100px" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></canvas>
		<!-- 放置xy坐标值 -->
		<div id="cursourxy"></div>
		<!-- 渐变色 -->
		<canvas id="box3" width="200px" height="100px" style="border: 1px solid #666666;"></canvas>
		<!-- 嵌入图片 -->
		<br />
		<canvas id="img"  height="500px" style="width:500px; border:1px solid #666666;"></canvas>
		
		
		
		<script type="text/javascript">
		
		var c=document.getElementById("myCanvas");
		/* getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 */
		var cxt=c.getContext("2d");
		/* 第一部分画矩形 */
		/* fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。 */
		cxt.fillStyle="#FF0000";
		cxt.fillRect(0,0,150,75);//绘制“被填充”的矩形
		/* 第二部分：给坐标值 */
		function cnvs_getCoordinates(e)
		{//鼠标指针移动到元素上时触发。
		x=e.clientX;
		y=e.clientY;
		document.getElementById("cursourxy").innerHTML="坐标值: (" + x + "," + y + ")";
		}
		function cnvs_clearCoordinates()
		{//当鼠标指针移出元素时触发。
		document.getElementById("cursourxy").innerHTML="";
		}
		/* 画圆 */
		cxt.fillStyle="#000000";//颜色
		cxt.beginPath();//起始一条路径，或重置当前路径
		cxt.arc(70,18,15,0,Math.PI*2,true);//创建弧/曲线（用于创建圆形或部分圆）
		cxt.closePath();//创建从当前点回到起始点的路径
		cxt.fill();//填充当前绘图（路径）
		/* 渐变色 */
		 var box3=document.getElementById("box3");
		 var cxt2=box3.getContext("2d");
		 var grd=cxt2.createLinearGradient(0,0,200,100);//创建线性渐变（用在画布内容上）
		 grd.addColorStop(0,"#FF0000");//规定渐变对象中的颜色和停止位置
		 grd.addColorStop(1,"#00FF00");
		 cxt2.fillStyle=grd;
		 cxt2.fillRect(0,0,200,100);
/* 放入图片 */
		var img1=document.getElementById("img");
		var cxt4=img1.getContext("2d");
		//创建新的图片对象
		     var imgx = new Image();
		     //指定图片的URL
		     imgx.src = "https://img.tupianzj.com/uploads/allimg/190924/29-1Z924142629.jpg";
			 //imgx.src ="img/lyh.png";
			 imgx.width="500px"
			 imgx.height="500px";
		    //浏览器加载图片完毕后再绘制图片
		    imgx.onload = function(){
		         //以Canvas画布上的坐标(10,10)为起始点，绘制图像
		         cxt4.drawImage(imgx, -100, -300);             
		     };
		
		</script>
	</body>
</html>

SVG与Canvas 的区别

1、SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
2、Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
3、依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
4、不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

H5 与各个主流浏览器的兼容性

H5实例

<!DOCTYPE html>
	<html>
	    <head>
			
	      <!-- 字符编码，防止网页乱码   -->
	       <meta charset="UTF-8">
		   <!-- 告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话，它不起作用 -->
		   <meta http-equiv="X-UA-Compatible" content="ie=edge">
		    <!-- 编写发送浏览器的头部信息 -->
		       <!-- content-type: text/html;charset=utf-8 -->
		   	<meta http-equiv="content-type" content="text/html;charset=utf-8" />  
		   <!-- viewport 进行移动界面自适配，并且禁止用户进行修改适配大小   -->
		   	<meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no"  />
			<!-- SEO   -->
			<!-- keyords 常用于搜索引擎可进行模糊搜索到该网站的关键字 -->
			<meta name="keywords" content="8-12个以英⽂逗号隔开的单词或词语">  
			<!-- description 是网站的相关介绍 -->
			<meta name="description" content="80字以内的⼀段话，与⽹站内容相关">
			<!-- charset:iso-8859-1 -->
			<meta http-equiv="charset" content="iso-8859-1">
			<!-- expires:31 Dec 2008 -->
			<meta http-equiv="expires" content="31 Dec 2008">
			<!-- 强制客户端浏览器为google内核 -->
			<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			<!-- 设置谷歌内核 -->
			<meta name="renderer" content="webkit">
		    <!-- 标签为页面上的所有链接规定默认地址或默认目标 -->
		    <base href="https://www.baidu.com"/>
		    <!-- 跳转方式 -->
			<base target="_self">
			<!-- 搜索引擎的索引有帮助 客户端接受服务器端返回的几种格式 -->
			<meta name="keywords" content="HTML,ASP,PHP,SQL">
			<!-- 标题 -->
		    <title>HTML5 页面布局</title>
			<!-- 外部样式 -->
		    <link rel="stylesheet" href="./css/index.css">
			<!-- 内部样式 -->
			<style style="text/css">
				  header, section, footer, aside, nav, article, figure, figcaption {
				                display: block;}       
				            body {
				                color: #666666;
				                margin: 0px;}
				            .wrapper {
				                width: 940px;
				                margin: 20px auto 20px auto;
				                border: 2px solid #000000;}
				            header {
				                height: 160px;
				                }
				            h1 {
				                color:#000;
				                width: 940px;
				                height: 130px;
				                margin: 0px;}
				            nav, footer {
				                clear: both;
				                color: #FFFFFF;;
				                
				                height: 30px;}
				            nav ul {
				                margin: 0px;
				                padding: 5px 0px 5px 30px;}
				            nav li {
				                display: inline;
				                margin-right: 40px;}
				            nav li a {
				                color: #FFFFFF;}
				            nav li a:hover, nav li a.current {
				                color: #000000;}
				            section.courses {
				                float: left;
				                width: 659px;
				                border-right: 1px solid #EEEEEE;}
				            article {
				                clear: both;
				                overflow: auto;
				                width: 100%;}
				            hgroup {
				                margin-top: 40px;}
				            figure {
				                float: left;
				                width: 250px;
				                height: 240px;
				                padding: 5px;
				                margin: 20px;
				                border: 1px solid #EEEEEE;}
				            figcaption {
				                font-size: 90%;
				                text-align: left;}
				            aside {
				                width: 230px;
				                float: left;
				                padding: 0px 0px 0px 20px;}
				            aside section a {
				                display: block;
				                padding: 10px;
				                border-bottom: 1px solid #EEEEEE;}
				            aside section a:hover {
								color: #985D6A;
				                }
				            a {
								color: #DE6581;
				                text-decoration: none;}
				            h1, h2, h3 {
				                font-weight: normal;}
				            h2 {
				                margin: 10px 0px 5px 0px;
				                padding: 0px;}
				            h3 {
				                margin: 0px 0px 10px 0px;
				                color: #DE6581;}
				            aside h2 {
				                padding: 30px 0px 10px 0px;
				                color: #DE6581;}
				            footer {
				                font-size: 80%;
				                text-align:center;
								color: black;
				                padding: 7px 0px 0px 20px;}
				
			</style>
			<!-- 页面加载之前需要加载的脚本 -->
			<script type="text/javascript"></script>
	    </head>
	    <body>
			<!-- H5页面布局 -->
			 <div class="wrapper">
			            <header>
			                <h1>网站标题</h1>
							<!-- 标签定义导航链接的部分。 -->
			                <nav>
			                    <ul>
			                        <li><a href="" class="current">首页</a></li>
			                        <li><a href="">产品</a></li>
			                        <li><a href="">服务</a></li>
			                        <li><a href="">关于我们</a></li>
			                        <li><a href="">联系我们</a></li>
			                    </ul>
			                </nav>
			            </header>
						<!-- 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 -->
			            <section class="courses">
							<!-- 标签规定独立的自包含内容 -->
			                <article>
								<!-- 规定独立的流内容（图像、图表、照片、代码等等） -->
			                    <figure>
			                        <img src="https://www.0735it.net/images/kc/javase.jpg" alt="Bok Choi" />
			                        <!-- 为 figure 添加标题-->
									<figcaption>Java程序设计</figcaption>
			                    </figure>
								<!-- 标签用于对网页或区段（section）的标题进行组合。 -->
			                    <hgroup>
			                        <h2>Java程序设计</h2>
			                        <h3>面向对象程序设计</h3>
			                    </hgroup>
			                    <p>
　　不要必须让生活跌宕波澜，要明白平静无奇才是生活的真。惟有踏踏实实走进生活的人，才能真正品味生活的真谛。</p>
			                </article>    
			                <article>
			                    <figure>
			                        <img src="https://www.0735it.net/images/kc/h5.jpg" alt="Teriyaki sauce" />
			                        <figcaption>　精美短文1</figcaption>
			                    </figure>
			                    <hgroup>
			                        <h2>　精美短文1</h2>
			                        <h3>　精美短文2 + 　精美短文3 + 　精美短文3</h3>
			                    </hgroup>
			                    <p>乔治、赫伯特说过：“一个人如果20岁不英俊，30岁不强壮，40岁不富有，50岁不睿智，那么他这辈子就别想英俊、强壮、富有和睿智了。”这是西方人眼中的生命的季节。</p>
			                </article>    
			            </section>
						<!-- 标签定义其所处内容之外的内容。 -->
			            <aside>
			                <section class="popular-recipes">
			                    <h2>xxxxxx</h2>
			                    <a href="https://www.liyongzhen.com/js" target="_blank">xxxxxxxxxx</a>
			                    <a href="https://www.liyongzhen.com/jstl" target="_blank">xxxxxxxx</a>
			                    <a href="https://www.liyongzhen.com/ajax" target="_blank">xxxxxxxx</a>
			                    <a href="https://www.liyongzhen.com/sql" target="_blank">xxxxxxx</a>
			                </section>
			                <section class="contact-details">
			                    <h2>联系我们</h2>
			                    <p>长沙市<br />
			                        天罡1号</p>
			                </section>
			            </aside>
						<!-- 标签定义文档或节的页脚。 -->
			            <footer>
			                &copy; 2020 天干物燥
			            </footer>
			        </div><!-- .wrapper -->
			
			 <!-- 页内JS代码快  -->
			<script type="text/javascript">
			    document.write("<h1>Hello World!</h1>")
			</script> 
			<!-- 页面加载之后脚本 -->
			<script type="text/javascript" src="/外部路径" defer="是否规定延迟" async="规定异步执行脚本" charset="规定外部脚本的编码"></script>
	    </body>
	</html>