功能:實現簡單畫板功能
          很簡單,基本的html文件+js文件

          html文件:
          <html>
              <head>
                  <meta charset="utf-8">
                  <title>Canvas Paint</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="800">
                </canvas>
              </div>
              <script type="text/javascript" src="js/draw.js"></script>
            </body>
          </html>

          js文件:draw.js
          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);
              }
          }

          posted on 2013-09-13 09:55 Ying-er 閱讀(2662) 評論(0)  編輯  收藏

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 广德县| 玛曲县| 宁晋县| 乌兰浩特市| 阿勒泰市| 会同县| 浦城县| 泾阳县| 抚松县| 诸暨市| 攀枝花市| 航空| 泰来县| 宁德市| 交城县| 澳门| 大冶市| 共和县| 疏附县| 赤峰市| 班玛县| 云浮市| 图们市| 库尔勒市| 日喀则市| 蓬溪县| 依兰县| 南木林县| 连城县| 灵武市| 渭南市| 东宁县| 增城市| 元江| 南通市| 厦门市| 贵定县| 读书| 西盟| 苗栗市| 石嘴山市|