canvas制作电子白板签名功能

news2025/11/4 11:02:12

Canvas是html5主要的画图工具，用户可以利用js在里面构思自己的创意，页面上很多手写签名是通过这个来完成的，让我们来用一个简单的例子作为抛砖引玉。

效果图

在这里插入图片描述

源代码

							<html>  
    <head>  
        <meta charset="utf-8">  
        <title>canvas制作电子白板签名功能</title>  
        <style type="text/css">  
          #container { position: relative;}  
          #imageView { border: 1px solid #b00; background-color: #fff; margin:0 auto; }  
       </style>  
  </head>  
  <body>  
    <div id="container">  
      <canvas id="imageView" width="680" height="400">  
      </canvas>  
    </div>  
<script type="text/javascript">  
    var canvas;  
    var context;  
     var tool;  
  
/**  
 * called on window load.  
 */  
if(window.addEventListener){  
    window.addEventListener('load',  
            init(),  
            false);  
}  
  
/**  
 * init.  
 */  
function init(){  
    /**  
     * find the canvas element.  
     */  
    canvas = document.getElementById('imageView');  
    if(!canvas){  
        return;  
    }  
    if(!canvas.getContext){  
        return;  
    }  
  
    /**  
     * get the 2D canvas context.  
     */  
    context = canvas.getContext('2d');  
    if(!context){  
        return;  
    }  
  
    /**  
     * pencil tool instance.  
     */  
    tool = new tool_pencil();  
  
    /**  
     * attach the mousedown, mousemove and mouseup event listeners.  
     */  
    canvas.addEventListener('mousedown', ev_canvas, false);  
    canvas.addEventListener('mousemove', ev_canvas, false);  
    canvas.addEventListener('mouseup',   ev_canvas, false);  
      
}  
  
/**  
 * This painting tool   
 * works like a drawing pencil   
 * which tracks the mouse movements.  
 *   
 * @returns {tool_pencil}  
 */  
function tool_pencil(){  
    var tool = this;  
    this.started = false;  
  
    /**  
     * This is called when you start holding down the mouse button.  
     * This starts the pencil drawing.  
     */  
    this.mousedown = function (ev){  
        /**  
         * when you click on the canvas and drag your mouse  
         * the cursor will changes to a text-selection cursor  
         * the "ev.preventDefault()" can prevent this.  
         */  
        ev.preventDefault();  
        context.beginPath();  
        context.moveTo(ev._x,ev._y);  
        tool.started = true;  
    };  
  
    /**  
     * This is called every time you move the mouse.  
     * Obviously, it only draws if the tool.started state is set to true  
     */  
    this.mousemove = function (ev){  
        if(tool.started){  
            context.lineTo(ev._x,ev._y);  
            context.stroke();  
        }  
    };  
  
    /**  
     * This is called when you release the mouse button.  
     */  
    this.mouseup = function (ev) {  
        if(tool.started){  
            tool.mousemove(ev);  
            tool.started = false;  
        }  
    };  
}  
  
/**  
 * general-purpose event handler.  
 * determines the mouse position relative to the canvas element.  
 *   
 * @param ev  
 */  
function ev_canvas(ev){  
    var x,y;  
    if(ev.offsetX || ev.offsetY == 0){  
        ev._x = ev.offsetX;  
        ev._y = ev.offsetY;  
    }  
      
    /**  
     * call the event handler of the tool.  
     */  
    var func = tool[ev.type];  
    if (func) {  
      func(ev);  
    }  
}  
      
    </script>  
  </body>  
</html>