canvas制作电子白板签名功能

布满荆棘的人生 2024-02-20 12:30 35阅读 0赞

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

### 效果图 ###

![在这里插入图片描述][c82a346dfabf4d169f4e74029f216bad.gif_pic_center]

### 源代码 ###

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

[c82a346dfabf4d169f4e74029f216bad.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/065a3aed5774457891298380c2637aca.png