zoukankan      html  css  js  c++  java
  • 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里的源代码。

  • 相关阅读:
    基于 HTML5 + WebGL 实现的垃圾分类系统
    B/S 端基于 HTML5 + WebGL 的 VR 3D 机房数据中心可视化
    基于 Web 端 3D 地铁站可视化系统
    HTML5 + WebGL 实现的垃圾分类系统
    基于HTML5 WebGL的工业化3D电子围栏
    iOS 不支持 PWA,那又怎么样?
    PWA 入门: 写个非常简单的 PWA 页面
    iOS UTI
    canOpenURL: failed for URL: "weixin://app/wx 问题解决方式
    iOS扩大UIButton按钮的可点击区域
  • 原文地址:https://www.cnblogs.com/zhwl/p/3530714.html
Copyright © 2011-2022 走看看