HTML5簡易オンライン描画ツールの導入事例を詳しく紹介

前回のHTML5に続き、パス円を描いて動的な時計を作ったり、異次元空間の反転で動く太陽系を作ったり、この二日間で線を描く知識をまとめました。 、円の描画、塗りつぶしなどを使用して、シンプルなオンライン描画ツールを作成します:

デモを見る: 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;
}

OK、残りのツール コードは貼り付けません。デモのソースコード。

以上がHTML5簡易オンライン描画ツールの導入事例を詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。