<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width:200px;
height:100px;
padding:10px;
border:1px solid red;
}
</style>
<script type="text/javascript">
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把图片拖放到矩形中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="drag-image.png" draggable="true" ondragstart="drag(event)">
</body>
</html>
①定义拖放元素:draggable属性和ondragstart全局事件处理函数使得函数可以拖拽
<img id="drag1" src="drag-image.png" draggable="true" οndragstart="drag(event)">
②定义拖放数据:每个drag event都有一个dataTransfer属性保存事件的数据,setData()方法添加一个项目的拖拽数据
在这个例子中数据类型是Text 值是可拖动元素的id("drag1")
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
③定义放置区:ondragover事件规定在何处放置 默认无法将数据/元素放置道其他元素中,如果需要设置允许放置,必须阻止对元素的默认处理方式
function allowDrop(ev){
ev.preventDefault();
}
④进行放置 发生drop事件
function drop(ev){
ev.preventDefault(); //避免浏览器的默认处理
var data=ev.dataTransfer.getData("Text");//通过get方法获取被拖的数据,返回在setdata方法中设置为相同类型的任何数据
ev.target.appendChild(document.getElementById(data));//把被拖元素追加到放置元素中
}
Canvas直线绘制 :三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--添加canvas元素,设置画布的大小-->
<canvas id="mycanvas" width="520px" height="1314px">
对不起,你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
//获取canvas元素
var myCanvas = document.getElementById("mycanvas");
//获取Context上下文
var ctx = myCanvas.getContext("2d");
// 开始路径绘制
ctx.beginPath();
// 设置路径起点,坐标为(20,20)
ctx.moveTo(20, 20);
// 添加一个(200,200)的新点
ctx.lineTo(200, 200);
// 添加一个(400,20)的新点
ctx.lineTo(400, 20);
//创建从当前点回到起始点的路径
ctx.closePath();
// 设置线宽
ctx.lineWidth = 2.0;
// 设置线的颜色
ctx.strokeStyle = "#CC0000";
// 绘制已定义的路径
ctx.stroke();
</script>
</body>
</html>
canvas矩形绘制:
①ctx.rect(x,y,width,height)
x,表示矩形左上角的x坐标 y表示矩形左上角的y坐标 width表示矩形的宽度,以像素计 height表示矩形的高度,以像素计
最后使用strok()或fill()绘制
②strokRect() 绘制矩形不填色 ctx.strokRect(x,y,width,height),不用最后单独使用strok()或fill()
③fillRect()绘制实心矩形,默认黑色, ctx.fillRect(x,y,width,height) ,不用最后单独使用strok()或fill(),可以使用fillstyle属性设置填充的颜色 渐变或模式
④clearRect()清空矩形内的指定像素 ctx.clearRect(x,y,width,height)
canvas绘制圆和椭圆:ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);
x表示圆的中心的x坐标 y表示圆的中心的y坐标 r表示圆的半径 sAngle表示起始角,以弧度计(弧的圆形的三点钟位置是0度而不是90度) eAngle表示结束角 counterclockwise表示绘制圆的方向 ,值为false表示顺时针,为true表示逆时针 默认是false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--添加canvas元素,设置画布的大小-->
<canvas id="mycanvas" width="520px" height="1314px">
对不起,你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
//获取canvas元素
var myCanvas = document.getElementById("mycanvas");
//获取Context上下文
var ctx = myCanvas.getContext("2d");
//开始路径绘制
ctx.beginPath();
//绘制圆
ctx.arc(100, 75, 50, 0, 2 * Math.PI); //最后一个参数按照默认值
//绘制已定义的路径
ctx.stroke();
</script>
</body>
</html>
椭圆:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--添加canvas元素,设置画布的大小-->
<canvas id="mycanvas" width="520px" height="1314px">
对不起,你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
//获取canvas元素
var myCanvas = document.getElementById("mycanvas");
//获取Context上下文
var ctx = myCanvas.getContext("2d");
//开始路径绘制
ctx.beginPath();
//绘制圆
ctx.arc(100, 75, 50, 0, 0.5 * Math.PI);
//闭合
ctx.moveTo(100,125);//最下面点
ctx.lineTo(100,75);//圆心
ctx.lineTo(150,75);//最右面点
//绘制已定义的路径
ctx.stroke();
</script>
</body>
</html>
//凡赛尔曲线(二次,找一个控制点;三次,找俩控制点)
填充和渐变:fillStyle属性,设置或返回用于填充绘画的颜色,渐变(线性或放射性),或模式ctx.fillStyle = color|gradient|pattern;
线性渐变:ctx.createLinearGradient(x0,y0,x1,y1); x0,y0表示开始点的x,y坐标 x1和y1表示结束点的x,y坐标
gradient.addColorStop(stop,color);用于规定渐变对象中的颜色和停止位置
stop表示渐变中开始与结束之间的位置 (0.0与1.0之间的值)
color表示在结束位置显示的css颜色值;
注:addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。我们可以多次调用 addColorStop() 方法来改变渐变。如果我们不对 gradient 对象使用该方法,那么渐变将不可见。为了获得可见的渐变,至少需要创建一个色标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--添加canvas元素,设置画布的大小-->
<canvas id="mycanvas" width="520px" height="1314px">
对不起,你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
//获取canvas元素
var myCanvas = document.getElementById("mycanvas");
//获取Context上下文
var ctx = myCanvas.getContext("2d");
//设置渐变色
var gradient = ctx.createLinearGradient(0, 0, 120, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop("0.2", "orange");
gradient.addColorStop("0.5", "yellow");
gradient.addColorStop("0.7", "green");
gradient.addColorStop(1, "blue");
//填充色为渐变色
ctx.fillStyle = gradient;
//绘制实心矩形
ctx.fillRect(10, 10, 100, 200);
</script>
</body>
</html>
使用createRadialGradient()方法创建放射状/环形的渐变, ctx.createRadialGradient(x0,y0,r0,x1,y1,r1)
x0表示渐变的开始圆的x坐标 y0表示渐变的开始圆的y坐标 r0表示开始圆的半径
x1表示渐变的结束圆的x坐标 y1表示渐变的结束圆的y坐标 r1表示结束圆的半径
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--添加canvas元素,设置画布的大小-->
<canvas id="mycanvas" width="520px" height="1314px">
对不起,你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
//获取canvas元素
var myCanvas = document.getElementById("mycanvas");
//获取Context上下文
var ctx = myCanvas.getContext("2d");
//设置渐变色
var gradient = ctx.createRadialGradient(75,50,5,80,50,100);
gradient.addColorStop(0, "red");
gradient.addColorStop("0.2", "orange");
gradient.addColorStop("0.5", "yellow");
gradient.addColorStop("0.7", "green");
gradient.addColorStop(1, "blue");
//填充色为渐变色
ctx.fillStyle = gradient;
//绘制实心矩形
ctx.fillRect(10, 10, 100, 200);
</script>
</body>
</html>
fill()方法:
填充当前的图像(路径) 默认是黑色,填充另一种颜色/渐变使用fillStyle属性 ctx.fill()
注:如果路径未关闭,那么fill()会从路径结束点到开始点之间添加一条线,以关闭该路径,然后填充
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--添加canvas元素,设置画布的大小-->
<canvas id="mycanvas" width="520px" height="1314px">
对不起,你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
//获取canvas元素
var myCanvas = document.getElementById("mycanvas");
//获取Context上下文
var ctx = myCanvas.getContext("2d");
//绘制矩形
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "red";
ctx.fill();
</script>
</body>
</html>
文字绘制:
fillText() 实心文本 ctx.fillText(text,x,y,maxWidth)
text表示在画布上输出的文本 x表示开始绘制文本的x坐标位置 y表示开始绘制文本的y坐标位置 maxWidth允许的最大文本宽度
ctx.fillText("Hello Syl!",10,50);
strokeText()和fillText()用法一样 ,但是是空心文本
font属性: 与css font属性相同;ctx.font = "50px Georgia";
textAlign()属性 文本内容的当前对齐方式 ctx.textAlign="center|end|left|right|start"; start四默认值,文本开始的地方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--添加canvas元素,设置画布的大小-->
<canvas id="mycanvas" width="520px" height="1314px">
对不起,你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
//获取canvas元素
var myCanvas = document.getElementById("mycanvas");
//获取Context上下文
var ctx = myCanvas.getContext("2d");
//画一条线便于展示
ctx.strokeStyle = "blue";
ctx.moveTo(200, 20);
ctx.lineTo(200, 180);
ctx.stroke();
//设置字体样式
ctx.font = "20px Georgia";
//值为start的情况
ctx.textAlign = "start";
ctx.strokeText("Hello Syl!", 200, 20);
//值为center的情况
ctx.textAlign = "center";
ctx.strokeText("Hello Syl!", 200, 60);
//值为end的情况
ctx.textAlign = "end";
ctx.strokeText("Hello Syl!", 200, 100);
//值为left的情况
ctx.textAlign = "left";
ctx.strokeText("Hello Syl!", 200, 140);
//值为right的情况
ctx.textAlign = "right";
ctx.strokeText("Hello Syl!", 200, 180);
</script>
</body>
</html>
textBaseline属性:
textBaseline属性设置或返回在绘制文本时的当前文本基线 ctx.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
alphabetic表示文本基线是普通的字母基线,默认值; top表示文本基线是em方框的顶端; hanging表示文本基线是悬挂基线;
middle表示文本基线是em方框的正中; ideographic表示文本基线是表意基线; bottom表示文本基线是em方框的底端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--添加canvas元素,设置画布的大小-->
<canvas id="mycanvas" width="1314px" height="1314px">
对不起,你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
//获取canvas元素
var myCanvas = document.getElementById("mycanvas");
//获取Context上下文
var ctx = myCanvas.getContext("2d");
//画一条线便于展示
ctx.strokeStyle = "blue";
ctx.moveTo(20, 100);
ctx.lineTo(1314, 100);
ctx.stroke();
//设置字体样式
ctx.font = "20px Georgia";
//值为alphabetic的情况
ctx.textBaseline = "alphabetic";
ctx.fillText("Hello Syl!", 20, 100);
//值为top的情况
ctx.textBaseline = "top";
ctx.fillText("Hello Syl!", 120, 100);
//值为hanging的情况
ctx.textBaseline = "hanging";
ctx.fillText("Hello Syl!", 220, 100);
//值为middle的情况
ctx.textBaseline = "middle";
ctx.fillText("Hello Syl!", 320, 100);
//值为ideographic的情况
ctx.textBaseline = "ideographic";
ctx.fillText("Hello Syl!", 420, 100);
//值为bottom的情况
ctx.textBaseline = "bottom";
ctx.fillText("Hello Syl!", 520, 100);
</script>
</body>
</html>
图片绘制:
使用 drawImage() 方法在画布上绘制图像,画布或视频. drawImage() 方法也能够绘制图像的某些部分,或增加或减少图像的尺寸
var image = new Image();//创建一个图片对象
image.src = "xxx"; //设置图片的路径
image.onload = function() { //当图片加载完成后
ctx.drawImage();//绘制图片
};
① 在画布上定位图像 ctx.drawImage(img,x,y);
②在画布上定位图像 ,并规定图像的宽度和高度 ctx.drawImage(img,x,y,width,height);
③剪切图像 定位被剪切的部分 ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
-
img 规定要使用的图像、画布或视频。
-
sx 表示开始剪切的 x 坐标位置。可选值。
-
sy 表示开始剪切的 y 坐标位置。可选值。
-
swidth 表示被剪切图像的宽度。可选值。
-
sheight 表示被剪切图像的高度。可选值。
-
x 表示在画布上放置图像的 x 坐标位置。
-
y 表示在画布上放置图像的 y 坐标位置。
-
width 表示要使用的图像的宽度(伸展或缩小图像)。可选值。
-
height 表示要使用的图像的高度,(伸展或缩小图像)。可选值。
①在画布上定位图像并作出一个立体的效果
image.onload = function() {
//输出10张照片
for(var i = 0; i < 5; i++) {
//参数:(1)绘制的图片 (2)坐标x,(3)坐标y
ctx.drawImage(image, 10 + i * 80, 10 + i * 80);
}
};
②在画布上定位图像,并规定图像的宽度和高度
image.onload = function() {
ctx.drawImage(image,10,10,150,150);
};
③剪切图像,并在画布上定位被剪切的部分
image.onload = function() {
ctx.drawImage(image,0,0);
ctx.drawImage(image,200,100,200,200);
ctx.drawImage(image,200,100,200,200,300,300,200,150);
};
localStorage()
localStorage 方法将数据保存在客户端本地的硬件设备中(通常是指硬盘,但也可以是其他硬件设备),即使浏览器关闭了,该数据依然存在,下次打开浏览器访问网站的时候仍然可以继续使用,也就是我们所说的永久性的本地存储
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>web</title>
</head>
<body>
<textarea id="memo" cols="60" rows="6"></textarea>
<input type="button" value="新增留言" onclick="saveStorage('memo')">
<input type="button" value="清空留言" onclick="clearStorage()">
<input type="button" value="清空最后一个数据" onclick="clearsingleStorage()">
<p id="msg"></p>
<script type="text/javascript">
function saveStorage(id){
var data=document.getElementById(id).value;
var time=new Date().toUTCString();
localStorage.setItem(time,data);
showMsg('msg');
}
function showMsg(id){
var result='<table border="1">';
for(var i=0;i<localStorage.length;i++){
var key=localStorage.key(i);
var value=localStorage.getItem(key);
result+='<tr><td>'+value+'</td><td>'+key+'</td></tr>';
}
result+='<table>';
var target=document.getElementById(id);
target.innerHTML=result;
}
showMsg('msg');
function clearStorage(){
localStorage.clear();
showMsg('msg');
}
function clearsingleStorage(){
localStorage.removeItem(localStorage.key(localStorage.length-1));
showMsg('msg');
}
</script>
</body>
</html>
sessionStorage 方法将数据保存在 session 对象中,所谓 session 直译过来就是会话,再通俗一点讲就是指用户在浏览某个网站时,从进入网站到关闭浏览器的这段时间,session 对象可以用来保存在这段时间内所要求保存的任何数据。我们称之为会话级别的本地存储
-
sessionStorage.setItem(key,value); 保存数据。
-
sessionStorage.getItem(key); 读取数据。
-
sessionStorage.removeItem(key); 删除单个数据。
-
sessionStorage.clear(); 清空数据。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
if(sessionStorage.pagecount) {
sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
} else {
sessionStorage.pagecount = 1;
}
document.write("你刷新了本页面 " + sessionStorage.pagecount + " 次");
</script>
<p>刷新页面看看效果。</p>
<p>关闭浏览器再运行看看效果</p>
</body>
</html>
Web Storage 作为简易数据库z:使用 json 格式作为文本保存来保存对象,获取该对象时再通过 json 格式来获取
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>简易数据库示例</title>
<script type="text/javascript">
//saveStorage是一个保存数据的方法
function saveStorage() {
//创建一个data对象,将数据保存在该对象的属性中
var data = new Object;
data.name = document.getElementById('name').value;
data.email = document.getElementById('email').value;
data.tel = document.getElementById('tel').value;
data.memo = document.getElementById('memo').value;
//将对象转换成json格式的文本数据,并将其返回
var str = JSON.stringify(data);
//通过localStorage.setItem(key,value);方法保存数据
localStorage.setItem(data.name, str);
alert("数据已保存。");
}
//findStorage是一个查找数据的方法
function findStorage(id) {
var find = document.getElementById('find').value;
var str = localStorage.getItem(find);
//将从localStorag中获取的数据转换成json对象
var data = JSON.parse(str);
var result = "姓名: " + data.name + '<br>';
result += "EMAIL: " + data.email + '<br>';
result += "电话号码: " + data.tel + '<br>';
result += "描述: " + data.memo + '<br>';
var target = document.getElementById(id);
target.innerHTML = result;
}
</script>
</head>
<body>
<h1>使用Web Storage来做简易数据库示例</h1>
<table>
<tr>
<td>姓名:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" id="email"></td>
</tr>
<tr>
<td>电话号码:</td>
<td><input type="text" id="tel"></td>
</tr>
<tr>
<td>描述:</td>
<td><input type="text" id="memo"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="保存数据" onclick="saveStorage();"></td>
</tr>
</table>
<hr>
<p>请输入姓名:<input type="text" id="find">
<input type="button" value="查找" onclick="findStorage('msg');">
</p>
<p id="msg"></p>
</body>
</html>
文件上传:
限制文件的上传类型,使用input的accept属性,改属性接受一个逗号分隔的MIME类型的字符串
accept="image/png" 或者 accept=".png" 表示只接受png图片
accept="image/png,image/jpeg"或者accept=".png,.jpg,.jpeg" 表示接受png/jpeg文件
accept="image/*" 表示接受任何图片文件类型
accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
表示接受任何MS Doc文件类型
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript"></script>
</head>
<body>
<form>
<div>
<lable for="profile_pic">上传图片</lable>
<input type="file" id="profile_pic" name="profile_pic" accept=".jpg,.jpeg,.png">
</div>
<div>
<button>提交</button>
</div>
</form>
</body>
</html>
文件读取:
var reader=new FileReader();
FileReader.error属性表示在读取文件时发生的错误 ,只读 ,var error=instanceofFileReader.error;
FileReader.readyState属性表示FileReader状态的数字,只读 取值如下: var state=instanceofFileReader.readyState;
EMPTY 0 还没有加载任何数据
LOADING 1 数据正在被加载
DONE 2 已完成全部的读取请求
FileReader.result属性表示文件的内容,改属性仅在文件读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作,只读
事件处理:
FileReader.onabort 在读取操作被中断时触发
FileReader.onerror 在读取操作发生错误时触发
FileReader.onload 在读取操作完成时触发
FileReader.onloadstart 在读取操作开始时触发
FileReader.onloadend 在读取操作结束时触发,,成功会在失败
FileReader.onprogress 在读取Blob时触发
方法:
FileReader.abort ()中止读取操作,在返回时,readyState属性为DONE.
FileReader.readAsArrayBuffer()开始读取指定的Blob中的内容,一旦完成,result属性中保存的将是被读取文件的ArrayBuffer数据对象
FileReader.readAsDataURL()开始读取指定的Blob内容,一旦完成,result属性中将包含一个data:URL格式的字符串以表示所读取文件的内容
FileReader.readAsText()开始读取指定的 Blob中的内容,一旦完成,result属性中将包含一个字符串以表示所读取文件的内容
常用的是上传一个图片并显示出来和上传文本显示文本
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
if(typeof FileReader=="undefind"){
alert("浏览器不支持")
}
function showDataByURL(){
var resultFile=document.getElementById("fileDemo").files[0];
if(resultFile){
var reader=new FileReader();//创建一个FileReader实例
reader.readAsDataURL(resultFile);//读取文件数据
reader.onload=function(e){//读取完毕 预览
var urlData=this.result;
document.getElementById("result").innerHTML+="<img src='"+urlData+"'alt='"+resultFile.name+"'/>'";
};
}
}
function showDataByText(){
var resultFile=document.getElementById("fileDemo").files[0];
if(resultFile){
var reader=new FileReader();
reader.readAsText(resultFile,'gb2312');
reader.onload=function(e){
var urlData=this.result;
document.getElementById("result").innerHTML+=urlData;
};
}
}
</script>
</head>
<body>
<input type="file" name="fileDemo" id="fileDemo" multiple="multiple"/>
<input type="button" value="显示图片" id="readAsDataURL" onclick="showDataByURL();" />
<input type="button" value="显示文本" id="readAsText" onclick="showDataByText();" />
<div id="result"></div>
</body>
</html>