详细介绍HTML5简易在线画图工具的实现案例

来源：动视网责编：小采时间：2020-11-27 15:10:19

详细介绍HTML5简易在线画图工具的实现案例

详细介绍HTML5简易在线画图工具的实现案例:继上次学习了HTML5的路径画圆做了动态时钟、异次元空间的反转做了运动的太阳系，这两天将画线、画圆、填充等知识点结合起来做了一个简易的在线画图工具：查看DEMO：HTML5简易在线画图工具功能包括自由画笔、橡皮擦、文字填充、画三角形、画圆等，相对我这个新

推荐度：

点击下载本文 文档为doc格式

导读详细介绍HTML5简易在线画图工具的实现案例:继上次学习了HTML5的路径画圆做了动态时钟、异次元空间的反转做了运动的太阳系，这两天将画线、画圆、填充等知识点结合起来做了一个简易的在线画图工具：查看DEMO：HTML5简易在线画图工具功能包括自由画笔、橡皮擦、文字填充、画三角形、画圆等，相对我这个新

继上次学习了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简易在线画图工具的实现案例

推荐度：

点击下载本文 文档为doc格式

标签：简易画图实现

热门焦点

详细介绍HTML5简易在线画图工具的实现案例

详细介绍HTML5简易在线画图工具的实现案例

详细介绍HTML5简易在线画图工具的实现案例

最新推荐

猜你喜欢

热门推荐