继上次学习了HTML5的路径画圆做了动态时钟、异次元空间的反转做了运动的太阳系，这两天将画线、画圆、填充等知识点结合起来做了一个简易的在线画图工具：

查看DEMO：HTML5简易在线画图工具

功能包括自由画笔、橡皮擦、文字填充、画三角形、画圆等，相对我这个新手来说，感觉挺难的，不过还是参考了资料慢慢“拼”出来了。

自由画笔的思路：

/******* 自由画笔 *******/ function dBrush(n){ setStatus(actions,n,1); //鼠标按下的时候 var status = 0; canvas.onmousedown=function(e){ e=window.event||e; var sX=e.pageX-this.offsetLeft; var sY=e.pageY-this.offsetTop; can.beginPath(); can.moveTo(sX,sY); status=1; } //鼠标移动的时候 canvas.onmousemove=function(e){ e=window.event||e; var eX=e.pageX-this.offsetLeft; var eY=e.pageY-this.offsetTop; if(status==1){ can.lineTo(eX,eY); can.stroke(); }else {return false} } //鼠标抬起的时候 canvas.onmouseup=function(){ can.closePath(); status=0; } //鼠标移出canvas画布结束画图 canvas.onmouseout=function(){ can.closePath(); status=0; } }

填充文字，主要用到fillText(val,x,y)：

/******* 文字 *******/ function dText(n){ setStatus(actions,n,1); canvas.onmousedown=function(e){ e=window.event||e; var x=e.pageX-this.offsetLeft; var y=e.pageY-this.offsetTop; var val = window.prompt('输入填充的文字',''); if(val==null) return false; //输入为空则返回 can.fillText(val,x,y); dBrush(0); //填入文字后返回自由画笔工具 } canvas.onmouseup=null; canvas.onmousemove=null; canvas.onmouseout=null; }

直线工具，主要确定起点和终点，然后lineTo(x,y)就可以了：

/******* 直线 *******/ function dLine(n){ setStatus(actions,n,1); //画直线，鼠标按下时，当前鼠标位置为起点 canvas.onmousedown=function(e){ e=window.event||e; var sX=e.pageX-this.offsetLeft; var sY=e.pageY-this.offsetTop; can.beginPath(); can.moveTo(sX,sY); } //画直线，鼠标抬起时，当前鼠标位置为终点 canvas.onmouseup=function(e){ e=window.event||e; var eX=e.pageX-this.offsetLeft; var eY=e.pageY-this.offsetTop; can.lineTo(eX,eY); can.closePath(); can.stroke(); } canvas.onmousemove=null; canvas.onmouseout=null; }

最后贴一个空心圆，起点坐标为圆心，鼠标移动距离为半径：

/******* 空心圆圈 *******/ function dArc(n){ setStatus(actions,n,1); var sX=0; //内部的“全局标量” var sY=0; //画空心圆，鼠标按下时，当前鼠标位置为圆心 canvas.onmousedown=function(e){ e=window.event||e; sX=e.pageX-this.offsetLeft; sY=e.pageY-this.offsetTop; } //画空心圆，鼠标抬起时，当前鼠标位置为外圆结束点 canvas.onmouseup=function(e){ e=window.event||e; var eX=e.pageX-this.offsetLeft; var eY=e.pageY-this.offsetTop; var dX=eX-sX var dY=eY-sY; //计算出半径 var r = Math.sqrt(Math.pow(dX,2)+Math.pow(dY,2)); can.beginPath(); can.arc(sX,sY,r,0,360,false); can.closePath(); can.stroke(); } canvas.onmousemove=null; canvas.onmouseout=null; }

好了，剩下的其他工具代码就不贴了，可以查看DEMO里的源代码。

以上就是详细介绍HTML5简易在线画图工具的实现案例的详细内容，更多请关注php中文网其它相关文章！

|2017-3-27 15:11

实现断点上传进行说明

一、实现文件多选

HTML5的<input>新增了"multiple"属性，该属性可接受多个值的文件上传字段

<input type="file" multiple="multiple" name="file" id="file">

添加了该属性用户就可以在弹出的对话框中一次性选择多个文件了

二、实现文件从计算机拖拽到网页以及添加文件队列功能

这里我们用 dragover 和 drop 两个事件来管理文件拖拽的功能

其中 dragover 用来处理在指定的元素上移动时的事件，这里我们通过给body绑定dragover时间来处理页面中拖动文件的事件

document.body.addEventListener('dragover', dragFile, false); function dragFile(evt) { evt.stopPropagation(); evt.preventDefault(); evt.dataTransfer.dropEffect = 'copy'; }

用 drop 事件来处理鼠标松开时候的事件，此时应该将用户拖动过来的文件加入到上传队列中，以供后续的处理

document.body.addEventListener('drop', dropFile, false); function dragFile(evt) { evt.stopPropagation(); evt.preventDefault(); // dataTransfer.files属性可以获取到所有拖动选择的文件，通过遍历可以读取到所有文件的信息。 // 遍历每个文件可以获取到文件的 name、size、type、lastModifiedDate等关键信息 var files = evt.dataTransfer.files; // addfile 方法 用来添加上传文件队列，在input的change事件中也需要调用 // 该方法首先检查有无文件正在上传中，如果有就将后续加入的文件放到上传队列中，如果没有文件正在上传就直接执行上传命令 addfile(files); }

三、文件续传原理

目前比较常用的断点续传的方法有两种，一种是通过websocket接口进行文件上传，另一种是通过ajax，两种方法各有千秋，虽然websocket听起来比较高端些~ 但是除了用了不同的协议外其他的算法基本上都是很相似的，并且服务端要开启ws接口，这里用相对方便的ajax来说明断点上传的思路。

说来说去，断点续传最核心的内容就是把文件“切片”然后再一片一片的传给服务器，但是这看似简单的上传过程却有着无数的坑。

首先是文件的识别，一个文件被分成了若干份之后如何告诉服务器你切了多少块，以及最终服务器应该如何把你上传上去的文件进行合并，这都是要考虑的。

因此在文件开始上传之前，我们和服务器要有一个“握手”的过程，告诉服务器文件信息，然后和服务器约定切片的大小，当和服务器达成共识之后就可以开始后续的文件传输了。

前台要把每一块的文件传给后台，成功之后前端和后端都要标识一下，以便后续的断点。

当文件传输中断之后用户再次选择文件就可以通过标识来判断文件是否已经上传了一部分，如果是的话，那么我们可以接着上次的进度继续传文件，以达到续传的功能。

四、文件的前端切片

有了HTML5 的 File api之后切割文件比想想的要简单的多的多。

只要用slice 方法就可以了

var packet = file.slice(start, end);

参数start是开始切片的位置，end是切片结束的位置 单位都是字节。通过控制start和end 就可以是实现文件的分块

如

file.slice(0,1000); file.slice(1000,2000); file.slice(2000,3000); // ......

五、文件片段的上传

上一部我们通过slice方法把文件分成了若干块，接下来要做的事情就是把这些碎片传到服务器上。

这里我们用ajax的post请求来实现