本文摘自PHP中文网,作者黄舟,侵删。
继上次学习了HTML5的路径画圆做了动态时钟、异次元空间的反转做了运动的太阳系,这两天将画线、画圆、填充等知识点结合起来做了一个简易的在线画图工具:
查看DEMO:HTML5简易在线画图工具
功能包括自由画笔、橡皮擦、文字填充、画三角形、画圆等,相对我这个新手来说,感觉挺难的,不过还是参考了资料慢慢“拼”出来了。
自由画笔的思路:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /******* 自由画笔 *******/
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):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /******* 文字 *******/
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)就可以了:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /******* 直线 *******/
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;
}
|
最后贴一个空心圆,起点坐标为圆心,鼠标移动距离为半径:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /******* 空心圆圈 *******/
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简易在线画图工具的实现案例的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5+canvas调用手机拍照功能实现图片上传功能(图文详解下篇)
如何利用HTML5 canvas旋转图片?(实例演示)
HTML5多图片预览上传及点击可拖拽控件的实例分享
HTML5 边框怎么设置
HTML5在工作中主要干什么
HTML5开发中viewport进行屏幕适配
关于HTML5中图片抛物线运动技巧分享
HTML5中关于canvas画图之画圆形的实例介绍
h5+c3如何优化前端界面
HTML5的开发工具有哪些
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 详细介绍HTML5简易在线画图工具的实现案例