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;
}

알겠습니다. 나머지 도구 코드는 여기에 게시하지 않겠습니다. 하지만 DEMO에서 소스 코드를 볼 수 있습니다.

위 내용은 HTML5 간단한 온라인 그리기 도구 구현 사례에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!