HTML5 canvas 做画板画图可以做电子白板

浏览数：89 / 时间：2015年06月09日

<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5 canvas 做画板画图 可以做电子白板</title>
        <style type="text/css">
        <!--
          #container { position: relative;}
          #imageView { border: 1px solid #000; }
        --></style>
  </head>
  <body>
    <div id="container">
      <canvas id="imageView" width="800" height="500">
      </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>

效果图：