<!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>
<!-- Web Starage-->
<!-- 检查是否支持-->
<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>
<!-- 设置和获取Storage数据-->
<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>
<!-- Storage API的属性和方法-->
<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>
<!-- web storage方法-->
<input type="button" value="保存Web Storage" onClick="SaveStorage(this.form)">
<input type="button" value="显示Web Storage" onClick="Show()">
<!--JSON方法-->
<input type="button" value="保存JSON" onClick="SaveStorageJSON(this.form)">
<input type="button" value="显示JSON" onClick="ShowJSON()">
</td>
</tr>
</table>
</form>
<div id="formdata"></div>
<!-- web storage方法-->
<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>
<!-- 存储JSON对象的数据-->
<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>
<!-- 修改的数据同时反馈到另一个界面-->
<!-- 实战：两个窗口之间实现通信，不知道为什么不好用，storage事件根本没有捕获到-->
<!-- Page1-->
<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>
<!-- Web SQL数据库-->
<!-- 基本的数据库操作实例，不知道为什么有问题-->
<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绘制图形-->
<!--样式strokeStyle线条颜色 fillStyle填充颜色 lineWidth线条宽度，默认1-->
<!--绘制黄色矩形，边框黑色-->
<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>
<!-- 实例：在Canvas上实现动画-->
<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>
<!-- html3需要的支持-->
<!--target决定html知识点1的页面会出现在name为blue的frame中-->
<h3><a href="html知识点1.html" target="blue">表单.html</a></h3>
<h3><a href="表单.html#aaa" target="showframe">带有锚的链接</a></h3>
<!-- -->
</body>
</html>
HTML5知识点2
猜你喜欢
转载自blog.csdn.net/qq_39326472/article/details/84777730
今日推荐
周排行