Introduction détaillée au cas de mise en œuvre de l'outil de dessin en ligne simple HTML5

Suite à la dernière étude de HTML5, nous avons dessiné un cercle pour créer une horloge dynamique, et l'inversion de l'espace à différentes dimensions pour créer un système solaire en mouvement. Au cours de ces deux jours, nous en apprendrons davantage. dessin au trait, dessin de cercles, remplissage et autres points de connaissances combinés pour créer un outil de dessin en ligne simple :

Voir la DÉMO : outil de dessin en ligne simple HTML5

Les fonctions incluent un pinceau gratuit, une gomme, le remplissage de texte, le dessin de triangles, le dessin de cercles, etc. Cela semble assez difficile pour un novice comme moi, mais je l'ai quand même "épelé" lentement en me référant aux informations.

Idées de pinceaux gratuits :

/******* 自由画笔 *******/
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;
  }
}

Remplissez le texte, principalement en utilisant 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;
}

Outil de ligne droite, déterminez principalement le point de départ point et le point final, alors lineTo(x,y) suffit :

/******* 直线 *******/
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;
}

Enfin, collez un cercle creux, la coordonnée du point de départ est le centre du cercle et la distance de mouvement de la souris est la radius :

/******* 空心圆圈 *******/
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;
}

D'accord, le reste du code de l'outil ne sera pas publié, vous pouvez voir le code source dans la DEMO.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!