首頁 > web前端 > H5教程 > 主體

詳細介紹HTML5簡易線上畫圖工具的實作案例

黄舟
發布: 2017-03-27 15:16:12
原創
4831 人瀏覽過

繼上次學習了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簡易線上畫圖工具的實作案例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板