HTML5详细介绍及使用（续篇）

最新推荐文章于 2023-09-28 16:48:04 发布

穆瑾轩

最新推荐文章于 2023-09-28 16:48:04 发布

阅读量1k

点赞数 1

分类专栏： # html学习板块原创未经允许不得转载我的前端学习板块

本文链接：https://blog.csdn.net/xiaoxianer321/article/details/110535396

版权

原创未经允许不得转载同时被 3 个专栏收录

95 篇文章 6 订阅

订阅专栏

我的前端学习板块

30 篇文章 0 订阅

订阅专栏

html学习板块

4 篇文章 4 订阅

订阅专栏

HTML5详细介绍及使用

一、插件html2canvas.js、canvas2image.js的使用

在上一篇中，我们使用url(canvas.toDataURL("image/png"))下载图片时，如果是IE浏览器会出现传递给系统调用的数据区域太大的错误。IE浏览器对URL的字符限制最大2083个字符。将canvas转图片并下载下来，可以使用canvas2image.js插件来实现；html转canvas（html2canvas.js），canvas转image（canvas2image.js）。相应的插件可以在这里提取：https://pan.baidu.com/s/1-_krWorAFt-ViUr5OQOdMw提取码ppq5。

1、html2canvas.js的使用

案例1：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html元素转canvas</title>
	<!-- html2canvas将Dom节点在Canvas里边画出来 -->
	<script src="js/html2canvas.min.js"></script>
	<style>
		p{
			font-size: 15px;
			font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif;
		}
		#content{
			border-radius: 3px;
		}
		#btnSave{
		    position: absolute;
		    left: 65px;
		    top: 320px;
		    width: 78px;
		    height: 30px;
		    background-color: #22b4f6;
		    color: #fff;
		    text-align: center;
		    border-radius: 3px;
		    border: none;
		}
		#Download{
		    margin-left: 250px;
		}
		.tx,.bt{
			border: 1px solid #999;
			width: 100px;
			height: 20px;
			border-radius: 3px;
		}
		.bt{
			background-color: #22b4f6;
			color: #fff;
			text-align: center;
			border: none;
		}
	</style>
</head>
<body>
	<div id="content" style="width:188px;height:300px;border:1px solid #22b4f6;float:left;text-align:center;">
		<p><img width="50" height="50" src="img/pic.jpg" alt="头像"><img width="50" height="50" src="img/pic.jpg" alt="头像"><img width="50" height="50" src="img/pic.jpg" alt="头像"></p>
	    <p>昵称：穆瑾轩</p>
	    <p>专业：前端 + 后端</p>
	    <p>语言：html、java、mysql</p>
	    <p>脚本：javascript</p>
	    <p><input type="text" class="tx" placeholder="微信公众号开发"></p>
	    <p><input type="button" class="bt" value="网站微站开发"></p>
	</div>
	<div style="width:60px;height:302px;float:left;text-align:center;line-height:302px;font-size:30px;color:#22b4f6;">==></div>
	<div id="images" style="width:190px;height:302px;float:left;text-align:center;line-height:302px">图片预览区</div>
	<button id="btnSave">转成图片</button>
</body>
<script>
	/*生成canvas图形*/
	// 获取转成图片按钮id
	var btnSave = document.getElementById("btnSave");
	// 获取内容id
	var content = document.getElementById("content");
	
	//将id为content的内容转为canvas，并放在images标签内
	btnSave.onclick = function(){
		html2canvas(content).then(function(canvas) {
			document.getElementById('images').innerHTML = '';
	        document.getElementById('images').appendChild(canvas);
	    });
	}
</script>
</html>

案例2：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>用一个已经存在的画布再次将html转入画布</title>
    <style>
        canvas {
            border: 1px solid black;
        }
        button {
            clear: both;
            display: block;
        }
        #content {
            background: rgba(100, 255, 255, 0.5);
            padding: 50px 10px;
        }
    </style>
</head>
<body>
<div><h1>html内容</h1>
    <div id="content">Render the content in this element <mark>only</mark> the existing canvas element</div>
</div>
<h1>已经存在的画布</h1>
<canvas width="500" height="200"></canvas>
<script type="text/javascript" src="./js/html2canvas.js"></script>
<button>Run html2canvas</button>
</body>
<script type="text/javascript">
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
    ctx.stroke();
    document.querySelector("button").addEventListener("click", function() {
        html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
            console.log('Drew on the existing canvas');
        });
    }, false);
</script>
</html>

2、canvas2image.js的使用

canvas2image.js使用原生的保存方法saveCanvas需要设置浏览器下载询问地址默认开启，并且需要自己输入后缀名。未设置则默认保存无后缀的文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="hb"><canvas id="thecanvas"  width="1100" height="200"  style="border: 1px solid black;">你的浏览器不支持画布技术，请使用谷歌浏览器/火狐浏览器或最新的IE9/10/11。</canvas><br /></div>
	    设置线条宽度：
	    <select id="xtkd">
          <option>1</option>
          <option>2</option>
          <option selected>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
        </select>
            设置线条颜色：
        <select id="xtys">
          <option value="1" selected>黄色</option>
          <option  value="2">红色</option>
        </select>
        <button id="clearhb">清空画布</button>
        <button id="dw">转图片</button><br />
        <!--<img width="1100" height="200" style="border: 1px solid black;"/>-->
	</body>
<script src="js/jquery.min.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/Canvas2Image.js"></script>	
<script type="text/javascript">
	var bMouseIsDown = false;//默认鼠标松开
	var oCanvas = document.getElementById("thecanvas");
	var oCtx = oCanvas.getContext("2d");
	var iWidth = oCanvas.width;
	var iHeight = oCanvas.height;
	oCanvas.onmousedown = function(e) { 
		bMouseIsDown = true;
			oCtx.beginPath();
			//处理线条宽度和颜色
	        oCtx.lineWidth = 3;//设置线条的宽度(默认)
	        oCtx.strokeStyle = "rgb(255,217,3)";//设置线条的颜色（默认）
	        var xtkd = document.getElementById("xtkd");
	        //获取选择的宽度
	        var kd = xtkd.options[xtkd.selectedIndex].text;
	        if(kd !== null) {
		        oCtx.lineWidth = kd;
	        }
	        //获取选择的颜色
			var xtys = document.getElementById("xtys");
			var ys = xtkd.options[xtys.selectedIndex].value;
			if(ys !== null && 2 == ys.valueOf(ys)) {
		        oCtx.strokeStyle = "rgb(255,0,0)";
	        }
			iLastX = e.clientX - oCanvas.offsetLeft + document.body.scrollLeft;
			iLastY = e.clientY - oCanvas.offsetTop + jQuery(window).scrollTop();
	}
	oCanvas.onmouseup = function() {
		bMouseIsDown = false;
		bMousezy = false;
		oCtx.closePath();
		iLastX = -1;
		iLastY = -1;
	}
	oCanvas.onmousemove = function(e) {
		if (bMouseIsDown) {
			var iX = e.clientX - oCanvas.offsetLeft + document.body.scrollLeft;
			var iY = e.clientY - oCanvas.offsetTop + jQuery(window).scrollTop();
			oCtx.moveTo(iLastX, iLastY);
			oCtx.lineTo(iX, iY); 
			oCtx.stroke();
			iLastX = iX;
			iLastY = iY;
		}
	}
	
	var qk = document.getElementById("clearhb");
	qk.onclick = function(){
		if(oCtx !== null){
			oCtx.clearRect(0,0,iWidth,iHeight);  
		}
	}
	
	var tp = document.getElementById("dw");
	tp.onclick = function(){
		//原生的保存方法，下载无后缀名需要自己输入
        saveCanvas(oCanvas, "PNG");
	}
	
	function saveCanvas(pCanvas, strType) {
		var bRes = false;
		if (strType == "PNG")
			bRes = Canvas2Image.saveAsPNG(oCanvas);
		if (strType == "BMP")
			bRes = Canvas2Image.saveAsBMP(oCanvas);
		if (strType == "JPEG")
			bRes = Canvas2Image.saveAsJPEG(oCanvas);
		//原生的保存方法，下载后缀名需要自己输入
		//注：需要自己开启浏览器设置（每次询问保存的位置）
	}
</script>
</html>

仅仅使用上面的插件其实会遇到很多头疼的问题，甚至canvas2image.js这个插件在IE浏览器下无法执行，这就很尴尬了。这个需要来一点改造：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="hb"><canvas id="thecanvas"  width="1100" height="200"  style="border: 1px solid black;">你的浏览器不支持画布技术，请使用谷歌浏览器/火狐浏览器或最新的IE9/10/11。</canvas><br /></div>
	    设置线条宽度：
	    <select id="xtkd">
          <option>1</option>
          <option>2</option>
          <option selected>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
          <option>8</option>
        </select>
            设置线条颜色：
        <select id="xtys">
          <option value="1" selected>黄色</option>
          <option  value="2">红色</option>
        </select>
        <button id="clearhb">清空画布</button>
        <button id="dw">Canvas2Image下载图片</button>
        <button id="xz">下载图片</button><br />
        <!--<img width="1100" height="200" style="border: 1px solid black;"/>-->
	</body>
<script src="js/jquery.min.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/Canvas2Image.js"></script>	
<script src="js/base64.js"></script>
<script type="text/javascript">
	var bMouseIsDown = false;//默认鼠标松开
	var oCanvas = document.getElementById("thecanvas");
	var oCtx = oCanvas.getContext("2d");
	var iWidth = oCanvas.width;
	var iHeight = oCanvas.height;
	oCanvas.onmousedown = function(e) { 
		bMouseIsDown = true;
			oCtx.beginPath();
			//处理线条宽度和颜色
	        oCtx.lineWidth = 3;//设置线条的宽度(默认)
	        oCtx.strokeStyle = "rgb(255,217,3)";//设置线条的颜色（默认）
	        var xtkd = document.getElementById("xtkd");
	        //获取选择的宽度
	        var kd = xtkd.options[xtkd.selectedIndex].text;
	        if(kd !== null) {
		        oCtx.lineWidth = kd;
	        }
	        //获取选择的颜色
			var xtys = document.getElementById("xtys");
			var ys = xtkd.options[xtys.selectedIndex].value;
			if(ys !== null && 2 == ys.valueOf(ys)) {
		        oCtx.strokeStyle = "rgb(255,0,0)";
	        }
			iLastX = e.clientX - oCanvas.offsetLeft + document.body.scrollLeft;
			iLastY = e.clientY - oCanvas.offsetTop + jQuery(window).scrollTop();
	}
	oCanvas.onmouseup = function() {
		bMouseIsDown = false;
		bMousezy = false;
		oCtx.closePath();
		iLastX = -1;
		iLastY = -1;
	}
	oCanvas.onmousemove = function(e) {
		if (bMouseIsDown) {
			var iX = e.clientX - oCanvas.offsetLeft + document.body.scrollLeft;
			var iY = e.clientY - oCanvas.offsetTop + jQuery(window).scrollTop();
			oCtx.moveTo(iLastX, iLastY);
			oCtx.lineTo(iX, iY); 
			oCtx.stroke();
			iLastX = iX;
			iLastY = iY;
		}
	}
	
	var qk = document.getElementById("clearhb");
	qk.onclick = function(){
		if(oCtx !== null){
			oCtx.clearRect(0,0,iWidth,iHeight);  
		}
	}
	
	var tp = document.getElementById("dw");
	tp.onclick = function(){
		//原生的保存方法，下载无后缀名需要自己输入（IE浏览器不兼容）
        saveCanvas(oCanvas, "PNG");
	}
	
	function saveCanvas(pCanvas, strType) {
		var bRes = false;
		if (strType == "PNG")
			bRes = Canvas2Image.saveAsPNG(oCanvas);
		if (strType == "BMP")
			bRes = Canvas2Image.saveAsBMP(oCanvas);
		if (strType == "JPEG")
			bRes = Canvas2Image.saveAsJPEG(oCanvas);
		//原生的保存方法，下载后缀名需要自己输入
		//注：需要自己开启浏览器设置（每次询问保存的位置）
	}
</script>
<script>
	/**
	 * 在本地进行文件保存
	 * @param  {String} data     要保存到本地的图片数据
	 * @param  {String} filename 文件名
	 */
	var saveFile = function(data, filename){
		//createElementNS(命名空间URI,元素)-http://www.w3.org/1999/xhtml代表HTML
	    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
	    save_link.href = data;
	    save_link.download = filename;
	    var event = document.createEvent('MouseEvents');
	    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	    save_link.dispatchEvent(event);
	};
	var tp = document.getElementById("xz");
	tp.onclick = function(){
		downloadfile();
	}
	
    /**
	 * 获取mimeType
	 * @param  {String} type the old mime-type
	 * @return the new mime-type
	 */
	var _fixType = function(type) {
	    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
	    var r = type.match(/png|jpeg|bmp|gif/)[0];
	    return 'image/' + r;
	};
	
	function downloadfile(){
		var oCanvas = document.getElementById("thecanvas");
		//如果不是IE浏览器
		if (this.IEVersion() === -1) {
			var imgData = oCanvas.toDataURL(type);
			// 图片导出为 png 格式
		    var type = 'png';
		    // 下载后的问题名
		    var filename = 'download_' + (new Date()).getTime() + '.' + type;
		    // 加工image data，替换mime type
		    imgData = imgData.replace(_fixType(type),'image/octet-stream');
	        saveFile(imgData,filename)
	    }else{
	    	//IE下使用msToBlob()
            var imgData = oCanvas.msToBlob(); 
            var blobObj = new Blob([imgData]);
            window.navigator.msSaveOrOpenBlob(blobObj,"download_"+(new Date()).getTime()+".png");
	    }
	}
	
	// 判断是否是ie 浏览器
	function IEVersion() {
        // 取得浏览器的userAgent字符串
        var userAgent = navigator.userAgent;
        // 判断是否为小于IE11的浏览器
        var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
        // 判断是否为IE的Edge浏览器
        var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;
        // 判断是否为IE11浏览器
        var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
        if (isLessIE11) {
            var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
            // 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分，，这一步不可省略！！！
            IEReg.test(userAgent);
            // 取正则表达式中第一个小括号里匹配到的值
            var IEVersionNum = parseFloat(RegExp['$1']);
            if (IEVersionNum === 7) {
            // IE7
                return 7;
            } else if (IEVersionNum === 8) {
            // IE8
                return 8;
            } else if (IEVersionNum === 9) {
            // IE9
                return 9;
            } else if (IEVersionNum === 10) {
            // IE10
                return 10;
            } else {
            // IE版本<7
                return 6;
            }
        } else if (isEdge) {
        // edge
            return 'edge';
        } else if (isIE11) {
        // IE11
            return 11;
        } else {
        // 不是ie浏览器
            return -1;
        }
    }
</script>
</html>

goole下的效果和IE下的效果

二、HTML5 拖放

在HTML5标准中，为了使元素可拖动，把draggable属性设置为true。文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。 整个过程可以描述为：选中-拖动-释放

1、选中

如果是文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。

draggable属性：设置元素是否可拖动。

语法：<element draggable="true | false | auto" >

true: 可以拖动
false: 禁止拖动
auto: 跟随浏览器定义是否可以拖动

2、拖动过程

每一个可拖动的元素，在拖动过程中，都会经历三个过程，拖动开始-->拖动过程中--> 拖动结束。dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();

针对对象	事件名称	说明
被拖动的元素	dragstart	在元素开始被拖动时候触发
	drag	在元素被拖动时反复触发
	dragend	在拖动操作完成时触发
目的地对象	dragenter	当被拖动元素进入目的地元素所占据的屏幕空间时触发
	dragover	当被拖动元素在目的地元素内时触发
	dragleave	当被拖动元素没有放下就离开目的地元素时触发

3、释放

到达目的地之后，释放元素事件。

针对对象	事件名称	说明
目的地对象	drop	当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。

案例1：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单的拖动</title>
		<style type="text/css">
			#div1 {
				width: 150px;
				height: 150px;
				padding: 10px;
				border: 1px solid #aaaaaa;
			}
		</style>
		<body>
		<p>拖动图片到矩形框中:</p>
		<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<br>
		<img id="drag1" src="img/ht.jpg" draggable="true" ondragstart="drag(event)" width="100" height="150">
	    </body>
		<script>
			function allowDrop(ev) {
				ev.preventDefault();
			}
			function drag(ev) {
				//dataTransfer.setData() 方法设置被拖数据的数据类型和值：其实就是压了一个标签id
				ev.dataTransfer.setData("Text", ev.target.id);
			}
			function drop(ev) {
				//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
				ev.preventDefault();
				//通过 dataTransfer.getData("Text") 方法获得被拖的数据。
				var data = ev.dataTransfer.getData("Text");
				ev.target.appendChild(document.getElementById(data));
			}
		</script>
	</head>
</html>

案例2：

<!DOCTYPE HTML>
<html>

	<head>
		<title>拖放示例-文本</title>
		<meta charset="UTF-8">
	</head>
	<style>
		#txt {
			color: green;
		}
		.img {
			width: 100px;
			height: 100px;
			border: 1px solid gray;
		}
		.dragabled{
			border: 1px solid gray;
			width: 400px;
			height: 400px;
			position: absolute;
			top:10px; 
			left:10px;
		}
		#mytarget{
			color: red;
			border: 1px solid gray;
			width: 400px;
			height: 400px;
			position:absolute;
			top:10px; 
			left:420px;
		}
	</style>
	<body>
		<div class="src">
			<div class="dragabled" id="ytarget">
				<div class="txt" id="txt">
					<p draggable="true">我是可以拖动的文字</p>
				</div>
				<div class="url" id="url">
					<a href="index.html" target="_blank">我是可以拖动的连接</a>
				</div>
				<img class="img" id="tupian1" src="img/2020050918313952.jpg" alt="图片1" draggable="true"/>
				<img class="img" id="tupian2" src="img/ht.jpg" alt="图片2" draggable="true"/>
			</div>
			<div id='mytarget'>Drop Here</div>
		</div>
	</body>
</html>
<script>
	var dragTxt = document.getElementById('txt');
	var dragUrl = document.getElementById('url');
	var dragtp1 = document.getElementById('tupian1');
	var dragtp2 = document.getElementById('tupian2');
	var targetys = document.getElementById('mytarget');
	var ytarget = document.getElementById('ytarget');
    var thisid = "";
	//被拖动的元素触发的事件：dragstart、drag、dragend
	dragTxt.ondragstart = handle_start;
	dragUrl.ondragstart = handle_start;
	dragtp1.ondragstart = handle_start;
	dragtp2.ondragstart = handle_start;

	dragTxt.ondrag = handle_drag;
	dragUrl.ondrag = handle_drag;
	dragtp1.ondrag = handle_drag;
	dragtp2.ondrag = handle_drag;

	dragTxt.ondragend = handle_end;
	dragUrl.ondragend = handle_end;
	dragtp1.ondragend = handle_end;
	dragtp2.ondragend = handle_end;
    
	function handle_start(e) {
//		console.log('dragstart-在元素开始被拖动时候触发');
		//设置被拖数据的数据类型和值
		e.dataTransfer.setData("Text", e.currentTarget.id);
	}

	function handle_drag(e) {
		//console.log('drag-在元素被拖动时候反复触发');
	}

	function handle_end(e) {
		//console.log('dragend-在拖动操作完成时触发');
	}
	//目的地对象触发的事件ondragenter、ondragover、ondragleave
	targetys.ondragenter = handle_enter;
	targetys.ondragover = handle_over;
	targetys.ondragleave = handle_leave;

	ytarget.ondragenter = handle_drop;
	ytarget.ondragover = handle_over;
	ytarget.ondragleave = handle_leave;

	function handle_enter(e) {
		thisid = this.id;
		console.log('handle_enter-当元素进入目的地时触发');
	}

	function handle_over(e) {
		//console.log('handle_over-当元素在目的地时触发');
		// 阻止浏览器默认行为
		e.preventDefault();
	}

	function handle_leave(e) {
		console.log('handle_leave-当元素离开目的地时触发');
	}

	//当元素在目的地放下时触发：两边都绑定
	targetys.ondrop = handle_drop;
	ytarget.ondrop = handle_dropnew;

	function handle_drop(e) {
		console.log('handle_drop-当元素在目的地放下时触发');
		e.preventDefault();
		if(this==targetys && targetys.innerHTML=="Drop Here"){
			targetys.innerHTML="";
		}
		if(thisid!=this.id){
			return false;
		}
		var data = e.dataTransfer.getData("Text");
		e.target.appendChild(document.getElementById(data));
	}
	
	function handle_dropnew(e) {
		console.log('handle_drop-当元素在目的地放下时触发');
		e.preventDefault();
		var data = e.dataTransfer.getData("Text");
		e.target.appendChild(document.getElementById(data));
	}
</script>

三、HTML5 内联 SVG

1、SVG定义及简介

SVG是Scalable Vector Graphics的缩写，意为可缩放矢量图形。1998年，万维网联盟成立了一个工作组，研发一种通过XML来表现矢量图形的技术——SVG！由于SVG也是一种XML文件，所以SVG也继承了XML的开放性、可移植性和交互性的优点。你可以为每一个元素增加JS事件处理器。在SVG中，每一个图形被记作一个对象。如果一个SVG对象的属性发生改变，浏览器可以自动重新生成图形。

SVG主要应用：1）图表视图(echart)、地图视图(WEB-GIS)；2）形象(AI)的全网应用；3）UI 产品的设计；4）SVG 动画

2、SVG 与 Canvas 区别

目前在计算机上主要有两种形式来表现图形，一种是栅格图形，另一种是矢量图形。

栅格图形：在栅格图形系统中，图像被表示为图片元素或者像素的长方形数组。每个像素用其 RGB 颜色值或者颜色表内的索引表示。这一系列也称为位图，通过以某种压缩格式存储（如JPEG, GIF, PNG等）。由于大多数现代显示设备也是栅格设备，显示图像时仅需要一个阅读器将位图解压并将它传输到屏幕上。

矢量图形：在矢量图形系统中，图形被描述为一些列的形状，它是特定坐标的集合。显示矢量图形需要按照特定的命令来绘制这些坐标，然后显示在屏幕上。矢量图形是对象，而不是一系列的像素。它们可以改变颜色、形状还有大小，图形中的文字都是可以被检索的，这些与栅格图形都有很大的不同。

想象一下在一张绘图纸上作图的过程，栅格图形的工作就像是描述哪个方格应该填充什么颜色，而矢量图形的工作则像是描述要绘制从某个点到另一个点的直线或曲线。

为什么要使用矢量图形？绝大部分情况下，我们都在使用栅格图形，而且创建栅格图形的工具更容易获得和使用。但是矢量图形有一个栅格图形无法替代的优势：无论如何的缩放，矢量图形都不会失真。这使得当我们需要具有精确测量以及看清图形细节的放大能力时，矢量图形显得尤其重要。

SVG与Canvas区别
	Canvas	SVG
历史	有apple私有技术发展而来	2003年成为W3c标准
功能	功能简单，2D绘制API，WEBGL等3D技术	功能丰富，各种图形，滤镜，动画等
特点	像素，只能驱动脚本	矢量，XML,CSS,元素操作
支持	主流浏览器，IE9+	主流浏览器，IE9+，其他SVG阅读器
操作对象	基于像素（动态点阵图）	基于图形元素
元素	单个HTML元素	多种图形元素
驱动	只能脚本驱动	支持脚本和CSS
事件交互	用户交互像素点	用户交互到图形与元素
性能	适合小面积，大数量的应用场景	合适大面积，小数量应用场景
动画	数据驱动	DOM驱动

3、创建 SVG 图像

1）SVG 文档基本结构

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>Cat</title>
  <desc>Stick Figure of Cat</desc>
  <!-- 在这里绘制图像 -->
</svg>

<!--根元素 <svg> 以像素为单位定义了整个图像的 width 和 height，还通过 xmlns 属性定义了 SVG 的命名空间。
<title> 元素的内容可以被阅读器显示在标题栏上或者是作为鼠标指针指向图像时的提示; 
<desc> 元素允许咱们为图像定义完整的描述信息。-->

2）基本形状和属性

基本形状：矩形 <rect>圆形 <circle>椭圆 <ellipse>线 <line>折线 <polyline>多边形 <polygon>路径 <path>

基本属性：fill 用来设置矩形的填充颜色（rgb 值、颜色名或者十六进制值）
stroke 用来设置矩形边框的颜色
stroke-width 用来设置矩形边框的宽度
fill-opacity 用来设置填充颜色透明度（范围：0 - 1）
stroke-opacity 用来设置笔触（边框）颜色的透明度（范围：0 - 1）
opacity 用来设置元素整体（包括”填充”和”边框”）的透明值（范围: 0 到 1）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg' xmlns:xlink='http://wwww.w3.org/1999/xlink'>
			<title>Cat</title>
			<desc>Stick Figure of Cat</desc>
			<!-- 在这里绘制图像 -->
			<circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
			<circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>
			<circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>
			<g id='whiskers'>
				<line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>
				<line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>
			</g>
			<use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)'></use>
			<!-- 耳朵 -->
			<polyline points='108 62,90 10, 70 45, 50, 10, 32, 62' style='stroke:black; fill:none' />
			<!-- 嘴 -->
			<polyline points='35 110,45 120, 95 120, 105, 110' style='stroke:black; fill:none' />
			<!-- 鼻子 -->
			<path d='M 75 90 L 65 90 A 5 10 0 0 0 75 90' style='stroke:black; fill:#ffcccc' />
			<text x="60" y="165" style='font-family:sans-serif;font-size: 14pt;stroke:none; fill: black;'>Cat</text>
		</svg>
		 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
            <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
        </svg>
	</body>
</html>

四、数据存储

本来，数据存储都是由 cookie 完成的，但是 cookie 不适合大量数据的存储，cookie 速度慢且效率低。现在，HMLT5提供了两种在客户端存储数据的办法（分别对应两个JavaScript对象）：

本地存储：localStorage(没有时间限制的数据存储，即当我们设置了之后浏览器关闭后再去访问它依然存在)

会话存储：sessionStorage(针对一个session的数据存储，当我们设置了之后浏览器关闭后再去访问他就消失了)

1、本地存储localstorage与会话存储sessionStorage

1）localstorage：

存储方式：以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。

大小：每个域名5M。尽管HTML5没有硬性规定存储空间的上限，但是大多数浏览器把本地存储限制为5MB以下。

语法：localStorage[keyName] = value;

2）sessionStorage：

本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。

语法：sessionStorage [keyName] = value;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post" onsubmit="return false;">
			用户名：<input type="text" id="yhm"/><br />
		        密    码：<input type="password" id="mm"/><br />
		        年    龄：<input type="number" id="nl"/><br />
		    <button id="bc" >保存</button>
		    <button id="qk" >清空</button>
		</form>
		
	</body>
	<script>
		var bc = document.getElementById("bc");
		var yhm = document.getElementById("yhm");
		var mm = document.getElementById("mm");
		var nl = document.getElementById("nl");
		//刷新后还会有
		onload=function(){
			if(localStorage["user_name"] !=null){
				yhm.value = localStorage["user_name"];
			}
			if(localStorage["pass_word"] !=null){
				mm.value = localStorage["pass_word"];
			}
			if(localStorage["years"] !=null){
				nl.value = localStorage["years"];
			}
		}
		//回车后触发保存
		bc.onclick = function(){
			localStorage["user_name"] = yhm.value;
			localStorage["pass_word"] = mm.value;
			sessionStorage["years"] = nl.value;
			return false;
		}
		qk.onclick = function(){
			//localStorage.removeItem("user_name"); 只清指定的
			localStorage.clear();//清除所有
			sessionStorage.clear();
		}
		//设置焦点
		function focusNextInput(thisInput) {
		    var inputs = document.getElementsByTagName("input");
		    for(var i = 0;i<inputs.length;i++){
		    	if(i==(inputs.length-1)){
		    		bc.onclick; //直接保存
		    		bc.focus();
		    	}else{
		    		if(thisInput==inputs[i]){
		    			 inputs[i+1].focus();
		                 break; //不加最后一行eles就直接回到第一个输入框
		    		}
		    	}
		    }
        }
		//如果是回车键就切换焦点
		yhm.onkeydown = function(event){
		    if (event.keyCode == 13) {
		        focusNextInput(this);
		    }
		};
		mm.onkeydown = function(event){
		    if (event.keyCode == 13) {
		        focusNextInput(this);
		    }
		};
		nl.onkeydown = function(event){
			if (event.keyCode == 13) {
		        focusNextInput(this);
		    }
		}
	</script>
</html>

2、离线缓存简介（application cache）

1）定义

离线应用的一项基本技术就是缓存，即下载文件（网页）并在用户计算机上保存一份副本。HTML5离线缓存又名Application Cache，是从浏览器的缓存中分出来的一块缓存区，要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。

2）离线缓存的优势

离线web可以应付间歇性的断网。但是离线应用并不适合所有的网页，比如要实时查询报价的股票网站，这个页面存在的唯一价值就是能够连接web服务器更新数据。不过如果是一个股票分析页面那么下载好一批数据后，即使离线也能正常生成图表和分析报告。离线功能适合那些动用大量javaScript代码在内存中维护很多信息的网页。

离线缓存可以将站点的一些文件缓存到本地，它是浏览器自己的一种机制，将需要的文件缓存下来，以便后期即使没有连接网络，被缓存的页面也可以展示。即使有网络，优先本地存储的资源。

优势：

a)离线浏览，用户可在应用离线时使用；

b)减少服务器负载，提高资源加载速度；

3）相关JavaScript API

核心是applicationCache对象，有个status属性，表示应用缓存的当前状态：

0（UNCACHED） : 无缓存，即没有与页面相关的应用缓存

1（IDLE） : 闲置，即应用缓存未得到更新

2 （CHECKING） : 检查中，即正在下载描述文件并检查更新

3 （DOWNLOADING） : 下载中，即应用缓存正在下载描述文件中指定的资源

4 （UPDATEREADY） : 更新完成，所有资源都已下载完毕

5 （IDLE） : 废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存

4）相关的事件

表示应用缓存状态的改变：

checking : 在浏览器为应用缓存查找更新时触发

error : 在检查更新或下载资源期间发送错误时触发

noupdate : 在检查描述文件发现文件无变化时触发

downloading : 在开始下载应用缓存资源时触发

progress：在文件下载应用缓存的过程中持续不断地下载地触发

updateready : 在页面新的应用缓存下载完毕触发

cached : 在应用缓存完整可用时触发

5）浏览器支持

IE10+、Firefox3+、Safari4+、Opera10.6、Chrome、iOS3.2+、Android Webkit

3、如何实现离线缓存

1）引用描述文件（manifest）

页面上需配置：<html manifest="xxx.appcache">

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

2）创建及配置描述文件（manifest ）

manifest 文件：manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件可分为三个部分：

①CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

②NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

③FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST
# 2020-12-09 v1.0.0
/theme.css
/main.js
 
NETWORK:
login.jsp
 
FALLBACK:
404.html

3）配置服务端（tomcat）

<mime-mapping>

     <extension>manifest</extension>

     <mime-type>text/cache-manifest</mime-type>

</mime-mapping>

穆瑾轩

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML5详细介绍及使用（续篇）

跨域一、跨域的背景及定义什么是跨域由于浏览器厂商对安全性的考虑，提出了浏览器的同源策略做为解决方案。它是一个用于隔离潜在恶意文件的重要安全机制。同源即协议、域名、端口三者一致。不同源即跨域。同源策略：同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略是一种约定，它是浏览器最核心也最基本的安...
复制链接

扫一扫