HTML5知识点2

小鱼儿 2022-04-12 13:44 229阅读 0赞

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>html知识点2</title>
    	<style>
    		#canvas{
    			border-top:2px solid #f00;
    			border-right:2px solid #f90;
    			border-left:2px solid blue;
    			border-bottom:2px solid green;
    		}#canvas1{
    			border:1px solid #000000
    		}#canvas2{
    			border:1px solid #000000
    		}#canvas3{
    			border:1px solid #000000
    		}#canvas4{
    			border:1px solid #000000
    		}#canvas5{
    			border:1px solid #000000
    		}#canvas6{
    			border:1px solid #000000
    		}#canvas7{
    			border:1px solid #000000
    		}#canvas8{
    			border:1px solid #000000
    		}#canvas9{
    			border:1px solid #000000
    		}
    	</style>
    	
    </head>
    
    <body>
    	
    	
        <button id="name1" value="查看" onclick="CheckStorageSupport()">检查</button><p></p>
    		<script type="text/javascript">
    		function CheckStorageSupport(){
    		if(window.sessionStorage){
    			console.log("浏览器支持sessionStarage控件");
    			
    		}else{
    			console.log("浏览器不支持sessionStarage控件");
    		
    		}
    		if(window.localStorage){
    			console.log("浏览器支持localStarage控件");
    		}else{
    			console.log("浏览器不支持localStarage控件");
    		}
    			}
    	</script>
    	
    	<button name="jj" id="jj" onClick="Test()">Test</button>
    	<script type="text/javascript">
    		function Test(){
    			window.localStorage.local2key="local2value";
    			window.localStorage["local3key"]="local3value";
    			window.localStorage.setItem("localkey","localvalue");
    			console.log(window.localStorage.getItem("localkey"));
    			console.log(window.localStorage.local2key);
    			console.log(window.localStorage["local3key"]);
    			window.sessionStorage.setItem("sessionkey","sessionvalue");
    			console.log(window.sessionStorage.getItem("sessionkey"));
    		}
    	</script>
    	
    	<form id="form1" name="form1" method="post" action="">
    		<table width="100%" border="1" bordercolor="#CCCCCC" cellpadding="3" cellspacing="0">
    			<tr>
    				<td>姓名</td>
    				<td><input type="text" name="name" id="name"></td>
    			</tr>
    			<tr>
    				<td>年龄</td>
    				<td><input type="text" name="age" id="age"></td>
    			</tr>
    			<tr>
    				<td>邮件</td>
    				<td><input type="text" name="email" id="email"></td>
    			</tr>
    			<tr>
    				<td>电话</td>
    				<td><input type="text" name="phone" id="phone"></td>
    			</tr>
    			<tr>
    			<td></td>
    				<td>
    				
    				<input type="button" value="保存Web Storage" onClick="SaveStorage(this.form)">
    				<input type="button" value="显示Web Storage" onClick="Show()">
    				
    					<input type="button" value="保存JSON" onClick="SaveStorageJSON(this.form)">
    				<input type="button" value="显示JSON" onClick="ShowJSON()">
    				</td>
    			</tr>
    		
    		</table>
    	</form>
    	<div id="formdata"></div>
    	
    	<script type="text/javascript">
    		function SaveStorage(frm){
    			var storage=window.sessionStorage;
    			storage.setItem("name",frm.name.value);
    			storage.setItem("age",frm.age.value);
    			storage.setItem("email",frm.email.value);
    			storage.setItem("phone",frm.phone.value);  //数据存入指定键对应的位置
    			
    			//removeItem("name")  //移除指定键值对
    			//clear() 清除所有数据
    		}
    		function Show(){
    			var storage=window.sessionStorage;
    			var result="";
    			for(var i=0;i<storage.length;i++){  //length：存储键值对的数量
    				var key=storage.key(i);   //获得某个位置的键
    				var value=storage.getItem(key);  //根据键返回相应的值
    				result+=key+":"+value+";";
    				
    			}
    			document.getElementById("formdata").innerHTML=result;
    		}
    	</script>
    	
    		<script type="text/javascript">
    			var flag=1;
    			window.sessionStorage.clear();
    		function SaveStorageJSON(frm){
    			var jsonObject=new Object();
    			var storage=window.sessionStorage;
    			jsonObject.name=frm.name.value;
    			jsonObject.age=frm.age.value;
    			jsonObject.email=frm.email.value;
    			jsonObject.phone=frm.phone.value;
    		    //序列化JSON对象转换为字符串数据，Storage是以字符串保存数据的，所以在保存Json格式的数据之前，需要把Json格式的数据转化为字符串。称之为序列化。stringify
    			var stringData=JSON.stringify(jsonObject);   
    			var storage=window.sessionStorage;
    			storage.setItem("key"+flag,stringData);
    			flag++;
    		}
    		function ShowJSON(){
    			var storage=window.sessionStorage;
    			var result="";
    			for(var i=0;i<storage.length;i++){  //length：存储键值对的数量
    				var key=storage.key(i);   //获得某个位置的键
    				var stringData=storage.getItem(key);  //根据键返回相应的值
    				//把数据反序列为Json格式
    				var jsonObject=JSON.parse(stringData);
    				result+="姓名:"+jsonObject.name+";  年龄:"+jsonObject.age+";  邮件:"+jsonObject.email+";  电话:"
    				+jsonObject.phone;
    			}
    			document.getElementById("formdata").innerHTML=result;
    		}
    	</script>
    	
    	
    	
    	<script type="text/javascript">
    		function SaveStorage2(frm){
    			window.localStorage.name=frm.name2.value;
    		}	
    		function EventHandle(e){
    			console.log("Heello world");
    			var storage=window.localStorage;
    			var result="";
    			result+="<br>姓名:"+storage.name;
    			result+="<br>key:"+e.key;          //存储中增加或删除的键
    			result+="<br>oldvalues"+e.oldValue;  //更新前键对应的数据
    			result+="<br>newvalues"+e.newValue;  //更新后键对应的数据
    			result+="<br>url"+e.url;   //指向Storage事件的发生源
    			result+="<br>storageArea:"+JSON.stringify(e.storageArea);  //storageArea，指向值发生改变的Storage
    			document.getElementById("formdata3").innerHTML=result;
    		}
    		//捕捉storage事件
    		window.addEventListener("storage",EventHandle,true);
    	</script>
    	<form id="form5" method="post" action="">
    	<input type="text" name="name2" id="name2">
    	<input type="button" value="保存" onClick="SaveStorage2(this.form)">
    	</form>
    
    	<div id="formdata3"></div>
    	
    
    	
    	
    	<form>
    		<input id="id" name="id" type="hidden">
    		<input id="name6" name="name6" placeholder="请输入姓名" type="text">
    		<input type="button" id="Submit" name="Submit" value="添加" onClick="Insert()">
    		<input type="button" value="查询"	onclick="Query()">
     	</form>
    		<ul id="mes"></ul>
    		<script>
    			//                   名字      版本    描述      大小
    			var db=openDatabase("TextDB","1.0","测试数据库",2*1024*1024);//打开数据库
    			db.transaction(function (tx){
    				tx.executeSql('CREATE TABLE IF NOT EXIXTS Username(id unique,Name)');
    			});
    			function Query(){
    				console.log("进入查询函数");
    				var name=document.getElementById("name6");
    				db.transaction(function (tx){
    					tx.executeSql('SELECT * FROM Username where Name like"%'+name.value+'%" ORDER BY id DESC',[],function(tx,results){
    						console.log("进入查询函数结点");
    						var len=results.rows.length;
    						var msg="";
    						for(var i=0;i<len;i++){
    							msg+="<li>· "
    							msg+="<span>"+results.rows.item(i)+"<span>"
    							msg+="<a href='###' onClick=\"SetForm('"+results.rows.item(i).id+"','"+results.rows.item(i).Name+"')\">编辑</a>";
    							msg+="<a href='###' onclick='Delete("+results.rows.item(i).id+")'>删除</a>";
    							msg+="</li>";
    						}
    						
    						document.getElementById("mes").innerHTML=msg;
    					},null);
    				});
    				console.log("退出查询函数")
    			}
    			function SetForm(id,name){
    				console.log("进入Setform函数");
    				if(id){
    					document.getElementById("id").value=id;
    					document.getElementById("name6").value=name;
    					document.getElementById("Submit").onclick=function(){Update();};
    					document.getElementById("Submit").value="更新";
    				}else{
    					document.getElementById("id").value="";
    					document.getElementById("name6").value="";
    					document.getElementById("Submit").onclick=function(){Insert();};
    					document.getElementById("Submit").value="添加";
    				}
    			}
    			function Insert(){
    				console.log("进入插入函数");
    				var name=document.getElementById("name6");
    				if(name.value== "")return;
    				var maxid;
    				db.transaction(function(tx){
    					tx.executeSql('SELECT id FROM Username ORDER BY id DESC',[],function(tx,result){
    						if(result.rows.length){
    							maxid=parseInt(result.rows.item(0).id)+1;
    						}
    							else{
    								maxid=1;
    							}
    						
    					},null);
    				});
    				console.log("进入插入函数结点1");
    				db.transaction(function(tx){
    					tx.executeSql('INSERT INTO Username (id,Name) VALUES('+maxid+',"'+name.value+'")',[],function(tx,result){
    						console.log("进入插入函数结点2");
    						//SetForm(maxid,name.value);
    						//Query();
    					});
    				});
    				console.log("退出插入函数");
    			}
    			function Update(){
    				console.log("进入更新函数");
    				db.transaction(function(tx){
    					var id=document.getElementById("id");
    					var name=document.getElementById("name");
    					console.log(name.value);
    					tx.executeSql('Update Username Set Name="'+name.value+'"where id='+id.value,[],function(tx,result){
    						SetForm(id.value,name.value);
    						Query();
    					});
    				});
    			}
    			function Delete(id){
    				console.log("进入删除函数");
    				db.transaction(function(tx){tx.executeSql('Delete From Username where id='+id,[],function(tx,result){
    					SetForm(id.value,name.value);
    					Query();
    				});
    			});
    			}
    		</script>
    	
    	
    	
    	<canvas id="canvas9" width="400" height="300">您的浏览器不支持此功能
    	</canvas>
    	<script type="text/javascript">
    	  function DrawRect(){
    		  var canvas=document.getElementById("canvas9");
    		  var context=canvas.getContext("2d");
    		  context.strokeStyle="#000";
    		  context.lineWidth=1;
    		  context.strokeRect(2,2,50,30);//绘制矩形边框
    		  context.fillStyle="#f90";
    		  context.fillRect(2,2,50,30);  //填充矩形区域
    		  context.clearRect(2,2,10,10);  //擦除矩形区域
    	  }
    		window.addEventListener('load',DrawRect,true);
    	</script>
    	
    	<canvas id="canvas1" width="400" height="300">您的浏览器不支持此功能
    	</canvas>
    	<script type="text/javascript">
    	  function DrawRect(){
    		  var canvas=document.getElementById("canvas1");
    		  var context=canvas.getContext("2d");
    		  
    		  context.beginPath();  //c创建绘图路径
    		  context.arc(150,100,50,0,Math.PI*2,true);  //圆形路径
    		  context.rect(50.,50,100,100);   //矩形路径
    		  context.closePath();  //关闭路径
    		  context.strokeStyle="#000";  
    		  context.lineWidth=3;
    		  
    		  context.fillStyle="#f90";
    		  context.stroke();  //绘制边框
    		  context.fill();  //填充区域
    		  
    		  context.moveTo(200,200);  //绘图开始坐标
    		  context.lineTo(200,250);  //绘制直线到目标坐标
    		  context.lineTo(250,300);
    		  context.fill();
    	  }
    		window.addEventListener('load',DrawRect,true);
    	</script>
    	
    	<canvas id="canvas3" width="400" height="300">您的浏览器不支持此功能
    	</canvas>
    	<script type="text/javascript">
    	  function RectArc(context){
    		  context.beginPath();
    		  context.rect(10,10,50,50);
    		  context.fillStyle="#f90";
    		  context.fill();
    		  context.beginPath();
    		  context.arc(60,60,30,0,Math.PI*2,true);
    		  context.fillStyle="#0f0";
    		  context.fill();
    	  }
    	  function DrawRect(){
    		  var canvas=document.getElementById("canvas3");
    		  var context=canvas.getContext("2d");
    		  
    		  
    		  //copy只绘制新图形，删除其它内容
    		  //darker图形重叠的地方颜色有两个颜色值相减决定
    		  //lighter图形重叠的地方颜色有两个颜色值相减决定
    		  //destination-atop 已有的内荣只在重叠位置保留，新图形绘制于内容之后
    		  //destination-in  重叠位置，已有内荣都保留，其它内容透明 A∩B
    		  //destination-out 不重叠位置，已有内容保留，其它内容透明 A-A∩B
    		  //destination-over 新图形绘制于已有图形后面  
    		  //source-over：新图形绘制于已有图形顶部
    		  //source-in   A∩B
    		  //source-out  B-(A∩B)；
    		  //source-atop 新的内荣只在重叠位置保留，已有的内容保留   A∩B 新颜色    B-A∩B已有图形颜色
    		  //xor  重叠位置透明
    		  
    		  context.globalCompositeOperation="source-over";
    		  context.beginPath();
    		  context.rect(10,10,50,50);
    		  context.fillStyle="#f90";
    		  context.fill();
    		  context.beginPath();
    		  context.arc(60,60,30,0,Math.PI*2,true);
    		  context.fillStyle="#0f0";
    		  context.fill();
    		  context.closePath();
    		  
    		  context.beginPath();
    		   //true和false都是
    		  //   1.5P
    		  //1p       0pi
    		  //   0.5p
    		  
    		  //
    		  //
    		  context.arc(200,100,30,0,Math.PI*(1/3),true);
    		  context.fillStyle="#0f0";
    		  context.stroke();
    		  context.closePath();
    		  //arcto方法画弧
    		  context.beginPath();
    		  context.moveTo(80,200);
    		  context.lineTo(150,140);
    		  context.lineTo(180,210);
    		  context.strokeStyle="rgba(0,0,0,0.4)";
    		  context.lineWidth=2;
    		  context.stroke();
    		  context.beginPath();
    		  context.moveTo(80,200);
    		  //arcto方法画弧  第一个点坐标，第二个点坐标  半径
    		  context.arcTo(150,140,180,210,50);
    		  context.strokeStyle="rgba(255,135,0,1)";
    		  context.stroke();
    		  //二次样条曲线
    		  context.beginPath();
    		  context.moveTo(100,180);//起点
    		  //                         控制点  终点
    		  context.quadraticCurveTo(200,50,300,200);
    		  context.strokeStyle="rgba(255,135,0,1)";
    		  context.stroke();
    		  //贝济埃曲线
    		  context.beginPath();
    		   context.moveTo(300,210);  //起点
    		   //                       控制点1 控制点2  终点
    		  context.bezierCurveTo(110,80,260,100,300,200);
    		  context.strokeStyle="rgba(50,135,0,1)";
    		  context.stroke();
    	  }
    		window.addEventListener('load',DrawRect,true);
    	</script>
    	
    	<canvas id="canvas4" width="400" height="300">您的浏览器不支持此功能
    	</canvas>
    	<script type="text/javascript">
    	  function DrawRect(){
    		   var canvas=document.getElementById("canvas4");
    		  var context=canvas.getContext("2d");
    		  var newImg=new Image();
    		  newImg.src="MySource/dog.jpg";
    		  newImg.onload=function(){
    			  context.save();  //保存当前状态
    			   context.beginPath();
    			  //裁剪这么个⚪，裁剪过后只有画在这个区域的东西才能显示
    			  context.arc(200,150,50,0,Math.PI*2,true);
    			  context.clip();
    			  
    			  //左上角位置
    			  context.drawImage(newImg,0,0);
    			  //左上角位置，想要图像的宽度和高度
    			  context.drawImage(newImg,250,100,150,200);
    			  //将要被绘制的区域的左上角，图像将要被绘制的宽度和高度，所要绘制的图像图像区域的左上角坐标，图像所要绘制的画布大小
    			  //所要绘制的图像图像区域
    			  //取原图片的从（150，80）开始截取（100，100）
    			  context.restore();//恢复保存的状态
    			  context.drawImage(newImg,150,80,100,100,0,0,200,200);
    			  
    			
    		  }
    	  }
    		window.addEventListener('load',DrawRect,true);
    	</script>
    	
    		<canvas id="canvas5" width="400" height="300">您的浏览器不支持此功能
    	</canvas>
    	<script type="text/javascript">
    	  function DrawRect(){
    		   var canvas=document.getElementById("canvas5");
    		  var context=canvas.getContext("2d");
    		   //线性渐变的矩形
    		  //创建对象
    		  var grd=context.createLinearGradient(0,0,300,0);
    		  //添加颜色
    		  grd.addColorStop(0,"#f90");
    		  grd.addColorStop(1,"#0f0");
    		  context.fillStyle=grd;
    		  context.fillRect(0,0,300,80);
    		  //径向渐变的⚪形
    		  var grd2=context.createRadialGradient(50,50,0,100,100,90);
    		  grd2.addColorStop(0,"#f90");
    		  grd2.addColorStop(1,"#0f0");
    		  context.fillStyle=grd2;
    		  context.beginPath();
    		  context.arc(100,100,90,0,Math.PI*2,true);
    		  context.fill();
    		  context.closePath();
    		  
    		  context.beginPath();
    		  //线帽属性lineCap。butt不带线帽，round圆形线帽，square方形线帽
    		  
    		  context.lineCap="round";
    		  context.lineWidth="20";
    		  context.moveTo(50,200);
    		  context.lineTo(150,200);
    		  context.stroke();
    		  context.closePath();
    		  
    		   context.beginPath();
    		  //线条连接属性lineJoin。miter外边缘一直延伸直至相交，round外边缘是一个弧，bevel外边缘是平的
    		  context.lineJoin="bevel";
    		  //当lineJoin的方式为miter时，可能会延伸的太长。miterLimit用来限制延伸的最大长度。
    		  context.miterLimit=20;
    		  context.lineWidth="20";
    		  context.moveTo(50,200);
    		  context.lineTo(50,250);
    		  context.lineTo(200,250);
    		  context.stroke();
    		  context.closePath();
    		  
    		  
    		  }
    		window.addEventListener('load',DrawRect,true);
    	</script>
    	
    	
    	<canvas id="canvas6" width="400" height="300">您的浏览器不支持此功能
    	</canvas><br><br><br>
    	<script type="text/javascript">
    	  function DrawRect(){
    		   var canvas=document.getElementById("canvas6");
    		  var context=canvas.getContext("2d");
    		  var img=new Image();
    		  img.src="MySource\\images\\Card\\Plants\\Blover.png";
    		  img.onload=function(){
    		//创建模式,repeat在各个方向上循环平铺，repeat-x在横向上循环平铺，repeat-y在纵向上循环平铺，no-repeat不平埔
    		   var patten=context.createPattern(img,'repeat-y');
    		  context.fillStyle=patten;
    		  context.fillRect(0,0,400,300);
    		  }
    		  
    		  }
    		window.addEventListener('load',DrawRect,true);
    	</script>
    	
    	<canvas id="canvas7" width="1200" height="800">您的浏览器不支持此功能
    	</canvas><br><br><br>
    	<script type="text/javascript">
    	  function DrawRect(){
    		   var canvas=document.getElementById("canvas7");
    		  var context=canvas.getContext("2d");
    		  context.save();
    		  //translate平移，水平方向平移20，垂直方向平移12
    		  context.translate(20,12)
    		  context.fillStyle="#0f0";
    		  context.fillRect(0,0,50,50);
    		  context.restore();
    		  
    		  context.save();
    		  //scale缩放，水平缩放因子0.6，垂直缩放因子0.5
    		  context.scale(0.6,0.5);
    		  context.fillStyle="#0f0";
    		  context.fillRect(200,0,50,50);
    		  context.restore();
    		  
    		  context.save();
    		  //rotate旋转，旋转的中心是坐标原点，正值顺时针，负值逆时针
    		  context.rotate(Math.PI/6);
    		  context.fillStyle="#f90";
    		  context.fillRect(300,50,100,50);
    		  context.restore();
    		  
    		  //绘制阴影
    		  //阴影的颜色，符合CSS规范的颜色值
    		  context.shadowColor="#666";
    		  //阴影的横向位移量，向右为正，向左为负
    		  context.shadowOffsetX=5;
    		  //高斯模糊，值越大，阴影边缘越模糊
    		  context.shadowBlur=5.5;
    		  //阴影的纵向位移量，向下为正，向上为负
    		  context.shadowOffsetY=5;
    		  context.fillStyle="#f90";
    		  context.font="bold 36px impact";
    		  //文字，               文字内容     位置  最大宽度
    		  var txt="Hello World!";
    		  //返回yigeTextMetrics对象，该对象的width属性可以获取文本的宽度（在页面上）
    		  var tm=context.measureText(txt);
    		  context.fillText(txt,450,50,200);
    		  context.fillText(tm.width,tm.width+15,50);
    		  context.strokeStyle="#f90";
    		  context.font="bold  italic 36px impact";
    		  context.strokeText("Hello World!",450,100,200);
    		  
    		  
    		  
    		  }
    		window.addEventListener('load',DrawRect,true);
    	</script>
    	
    	<canvas id="canvas8" width="1200" height="800">您的浏览器不支持此功能
    	</canvas><br><br><br>
    	<script type="text/javascript">
    	  function DrawRect(){
    		   var canvas=document.getElementById("canvas8");
    		  var context=canvas.getContext("2d");
    		  
    		  var newImg=new Image();
    		  newImg.src="MySource/dog.jpg";
    		  //createImageData()创建图像数据
    		  //获取ImageData图像数据
    		  newImg.onload=function(){
    	
    		  var imageData=context.getImageData(0,0,580,325);
    		  //修改ImageData的数据,width表示图像的宽度（像素），height表示图像的高度（像素），data是一维数组，保存了所有像素的颜色值
    		  for(var i=0,n=imageData.data.length;i<n;i+=4){
    			  imageData.data[i+0]=255-imageData.data[i+0];
    			  imageData.data[i+1]=255-imageData.data[i+1];
    			  imageData.data[i+2]=255-imageData.data[i+2];
    			  
    		  }
    			  //绘制图像数据，可选参数x,y,width,height确定了一个以200，150为坐标原点。本别定义了起点横坐标
    			  //起点纵坐标，宽度和高度
    			  context.putImageData(imageData,200,150);
    		  }
    	  }
    		window.addEventListener('load',DrawRect,true);
    	</script>
    	
    	<div align="center">
    	<canvas id="canvas" width="400" height="300"></canvas><br>
    	<input type="button" value="开始" onclick="animation.start()">
    	<input type="button" value="暂停" onclick="animation.pause()">	  
    	</div>
    	<script type="text/javascript">
    		var animation={};
    		animation.interval=null;
    		animation.x=100;
    		animation.y=50;
    		animation.xstep=2;
    		animation.ystep=2;
    		animation.radius=15;
    		animation.delay=1; 
    		animation.color="red";
    		animation.update=function(width,height){
    			this.x+=this.xstep;
    			this.y+=this.ystep;
    			//左边缘检测
    			if(this.x<this.radius){
    				this.x=this.radius;
    				this.xstep=-this.xstep;
    				this.color="blue";
    			}
    			
    			//右边缘检测
    			if((this.x+this.radius)>width){
    				this.x=width-this.radius;
    				this.xstep=-this.xstep;
    				this.color="#f90";
    			}
    			
    			//上边缘检测
    			if(this.y<this.radius){
    				this.y=this.radius;
    				this.ystep=-this.ystep;
    				this.color="red";
    			}
    			
    			//下边缘检测
    			if((this.y+this.radius)>height){
    				this.y=height-this.radius;
    				this.ystep=-this.ystep;
    				this.color="green";
    			}
    		}
    		
    		animation.draw=function(){
    			var canvas=document.getElementById("canvas");
    			var context=canvas.getContext("2d");
    			var width=canvas.getAttribute("width");
    			var height=canvas.getAttribute("height");
    			context.save();
    			context.clearRect(0,0,width,height);
    			this.update(width,height);
    			context.fillStyle=this.color;
    			context.translate(this.x,this.y);
    			context.beginPath();
    			context.arc(0,0,this.radius,0,Math.PI*2,true);
    			context.fill();
    			context.restore();
    		}
    		animation.pause=function(){
    			clearInterval(this.interval);
    		}
    		animation.start=function(){
    			console.log("start");
    			this.pause();
    			this.interval=setInterval("animation.draw()",this.delay);
    		}
    	</script>
    	
    	
    	<h3><a href="html知识点1.html" target="blue">表单.html</a></h3>
    	<h3><a href="表单.html#aaa" target="showframe">带有锚的链接</a></h3>
    	
    	
    </body>
    </html>