19.6.21html5拖拽

最新推荐文章于 2023-12-26 15:24:14 发布

原创最新推荐文章于 2023-12-26 15:24:14 发布 · 243 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

html5 专栏收录该内容

0 篇文章

订阅专栏

本文围绕前端技术展开，介绍了元素拖放操作，包括定义拖放元素、数据、放置区及放置动作；阐述了Canvas的直线、矩形、圆和椭圆绘制，还有填充、渐变、文字和图片绘制方法；讲解了localStorage和sessionStorage的本地存储，以及Web Storage作为简易数据库的使用；最后介绍了文件上传类型限制、读取及相关事件处理。

<!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全局事件处理函数使得函数可以拖拽

②定义拖放数据:每个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属性:

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>