HTML5簡易在線畫圖工具 原文:HTML5簡易在線畫圖工具

繼上次學習了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里的源代碼。

posted on 2014-02-24 01:00 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/3563943.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的HTML5简易在线画图工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。