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

来源：互联网发布：sql 查询没有借书学生编辑：程序博客网时间：2024/05/04 12:14

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

效果图：

0 0

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

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