试用支持canvas的浏览器,无JS依赖,运用新的HTML5技术
DrawBoard.renderDrawer('myHandWrite',{
  penColor:'#FF0000',
  penWidth:'1px'
});
仅一段代码就可渲染出整个绘图板
​1. [文件] Drawer.js 
/**
* @class Canvas DrawBoard
* @author Jason <brotherqian@163.com>
* @version 1.1
* @singleton
* @fileoverview
*   Build Date:2014/04/12
*   The application is valid in a browser that supports HTML5 canvas object.
*   A default canvas tag will render to the div you have appointed
*   You can use this application like this:
*      DrawBoard.renderDrawer('myHandWrite',{
*          penColor:'#FF0000',
*          penWidth:'1px'
*      });
*   If you need a text background,this will help:
*      DrawBoard.formatText('Sign here');
*   See {@link DrawBoard.renderDrawer} for more details
*/
   var DrawBoard/*DrawBoard对象*/={};
   DrawBoard.Id="";
   DrawBoard.penColor="#FF0000";
   DrawBoard.penWidth=0;
   DrawBoard.mouseX/*鼠标位置X*/=0;
   DrawBoard.mouseY/*鼠标位置Y*/=0;
   DrawBoard.isMouseDown/**/=false;
   DrawBoard.isMouseMove/**/=false;
   DrawBoard.mousePath/**/=new Array();
   DrawBoard.mousePosition/**/={x:0,y:0};
   DrawBoard.Events/*事件列表*/={
       onMouseMove/*鼠标移动*/:function(e){
           var me=DrawBoard;
           var ctx=me.Context;
           var canvas=me.Canvas;
           if(me.isMouseDown){
              if(me.isMouseMove){
                  ctx.moveTo(me.mouseX,me.mouseY);
                  me.isMouseMove=false;
              }
              me.mouseX= e.layerX;
              me.mouseY= e.layerY+32;
              me.mousePosition={"x":me.mouseX,"y":me.mouseY};
              me.mousePath.push(me.mousePosition);
              ctx.lineTo(me.mouseX, me.mouseY);
              ctx.stroke();
           }
       },
       onMouseDown/*鼠标按下*/:function(e){
           var me=DrawBoard;
           var ctx=me.Context;
           var canvas=me.Canvas;
           canvas.style.borderColor="#808080";
           var rect=canvas.getBoundingClientRect();
           me.isMouseDown=true;
           me.isMouseMove=true;
          //计算鼠标位置 仅适用fireFox
           me.mouseX= e.layerX;
           me.mouseY= e.layerY+32;
           if(me.mousePath.length==0){
               me.redo();
           }
       },
       onMouseOut/*鼠标移出*/:function(e){
           var me=DrawBoard;
           me.isMouseDown=false;
       },
       onMouseUp/*鼠标放开*/:function(e){
           var me=DrawBoard;
           var ctx=me.Context;
           var canvas=me.Canvas;
           canvas.style.borderColor="#C0C0C0";
           me.isMouseDown=false;
       }
   };
 
   /**
    * Render a child element to the node that has a id attribute which values @param id
    * @param {String} id the name that canvas will render as it's child element
    * @param {Object} option the pen color
    *         @argument {String} penColor rgb(0,0,0) or #000000 color
    *         @argument {String} penWidth pen width in pixel
    *         @argument {Int} width canvas board width
    *         @argument {Int} height canvas board height
    */
 
   DrawBoard.renderDrawer/*渲染绘图对象*/=function(id,option){
       var me=DrawBoard;
       var p=option;
       me.Id=id;
       me.penColor=p.penColor||me.penColor;
       me.penWidth= p.penWidth;
       var objContainer=document.getElementById(id);
       //初始化Canvas元素
       var objCanvas=document.getElementById('DrawBoard')||document.createElement('canvas');
       with(objCanvas){
           width= p.width||720;
           height= p.height||400;
           id='DrawBoard';
           style.margin='auto';
           style.border="1px solid #C0C0C0";
           style.borderRadius="4px";
           style.position="absolute";
           style.cursor="url(images/site/pencil.gif),auto";
       }
       objContainer.appendChild(objCanvas);
       var ctx=objCanvas.getContext('2d');
       //初始化canvas上下文对象
       with(ctx){
            lineWidth/*线宽*/=me.penWidth;
            strokeStyle/*描绘颜色*/=me.penColor;
            fillStyle/*填充颜色*/=me.penColor;
            lineCap/*线头样式*/="round";
            lineJoin/*转角样式*/="round";
            miterLimit/*折角锐利度*/=1;
            shadowColor='#FC0000';
            shadowBlur=1;
       }
       //为Canvas元素附加事件
       objCanvas.addEventListener("mousemove",me.Events.onMouseMove,false);
       objCanvas.addEventListener("mouseout",me.Events.onMouseOut,false);
       objCanvas.addEventListener("mouseup",me.Events.onMouseUp,false);
       objCanvas.addEventListener("mousedown",me.Events.onMouseDown,false);
       objCanvas.addEventListener("contextmenu",DrawBoard.redo,false);
       //赋值对象http://www.huiyi8.com/hunsha/hanshi/​
       me.Canvas=me.Canvas||objCanvas;
       me.Context=me.Context||ctx;
   }韩式婚纱照片
   DrawBoard.redo/*清空所有窗体*/=function(){
       var me=DrawBoard;
       var canvas=me.Canvas;
       var ctx=me.Context;
       ctx.clearRect(0,0,canvas.width,canvas.height);
       canvas.width=canvas.width;
       //置空鼠标路径数组
       me.mousePath.splice(0,me.mousePath.length);
       me.renderDrawer(me.Id,me.penColor,me.penWidth);
   };
   DrawBoard.formatText/*绘制一个水印*/=function(text){
       var me=DrawBoard;
       var canvas=me.Canvas;
       var ctx=me.Context;
       ctx.font/*字体*/="100px 宋体";
       ctx.fillText(text,100,200);
       ctx.stroke();
   };
   //取png数据类型
   DrawBoard.getImage=function(){
       return DrawBoard.Context!=null?DrawBoard.Canvas.toDataURL('image/png'):"";
   }
   DrawBoard.download=function(){
 
   }
 
   /**
    * POST you data to the server
    * @param option
    *         @argument {String} method 'POST' or 'GET' is valid
    *         @argument {String} url the address to post to
    *         @argument {String} isDirect if true to use  a asynchronous method,or false to not use
    *         @argument {Function} onSuccess the method to be called upon the success of the request
    */
   DrawBoard.post=function(option){
       var p=option;
       var request=new XMLHttpRequest()||window.ActiveXObject("Microsoft.XMLHttp");
       request.onreadystatechange=function(){
           if(request.readyState==4){
               if(request.status==200){
                   eval(option.onSuccess);
               }else{
 
               }
           }else{
 
           }
       };
       request.open(p.method||'POST', p.url, p.isDirect||true);
       request.send(p.params)
   }

html5 手写的canvas实现的更多相关文章

  1. html5手写签名

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta co ...

  2. canvas画布实现手写签名效果

    最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: <!--手写区--> <div class="mSign_signMa ...

  3. uni-app通过canvas实现手写签名

    分享一个uni-app实现手写签名的方法 具体代码如下: <template> <view > <view class="title">请在下面 ...

  4. Atitit s2018.2 s2 doc list on home ntpc.docx  \Atiitt uke制度体系 法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别 讯飞科大 语音云.docx \Atitit 代码托管与虚拟主机.docx \Atitit 企业文化 每日心灵 鸡汤 值班 发布.docx \Atitit 几大研发体系对比 Stage-Gat

    Atitit s2018.2 s2 doc list on home ntpc.docx \Atiitt uke制度体系  法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别   ...

  5. HTML5新增核心工具——canvas

    原文:HTML5新增核心工具--canvas Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决 ...

  6. AI应用开发实战 - 手写算式计算器

    扩展手写数字识别应用 识别并计算简单手写数学表达式 主要知识点 了解MNIST数据集 了解如何扩展数据集 实现手写算式计算器 简介 本文将介绍一例支持识别手写数学表达式并对其进行计算的人工智能应用的开 ...

  7. TensorFlow 之 手写数字识别MNIST

    官方文档: MNIST For ML Beginners - https://www.tensorflow.org/get_started/mnist/beginners Deep MNIST for ...

  8. 关于HTML5手机端页面缩放的问题

    通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content=" ...

  9. 手写一套迷你版HTTP服务器

    本文主要介绍如何通过netty来手写一套简单版的HTTP服务器,同时将关于netty的许多细小知识点进行了串联,用于巩固和提升对于netty框架的掌握程度. 服务器运行效果 服务器支持对静态文件css ...

随机推荐

  1. AAuto如何设置字体大小

    在代码视图中(按钮呈现的是设计视图,你再按一下就切换成代码视图了)可以设置缩放比率,右下角也可以设置字体大小   如果你的"设计视图"是灰色不可点击,那是因为你的代码根本没有按钮, ...

  2. 对国外某hotel的内网域简单渗透

    Penetration Testing不单单是一个博客,更热衷于技术分享的平台. 本文将讲述对国外某一hotel的渗透测试,让更多的人安全意识得到提高,有攻才有防,防得在好,也有疏忽的地方,这就是为啥 ...

  3. 【SharePoint】K2 for SharePoint 安装笔记【未完工】

    0.安装环境说明 0.1.软件版本 OS : Window Server 2012 标准版 SharePoint : 2013标准版 K2 : 4.6.9 0.2.环境结构 SharePoint 20 ...

  4. Chrome 插件 CrxMouse 去除后门优化版

    说明 CrxMouse 是一款挺不错的 Chrome 插件.仅仅是据说这个插件会在后台偷偷的上传用户的浏览数据,无论上传的内容是不是涉及隐私数据,总让人认为不放心,可是因为插件本身功能还是挺好用的,所 ...

  5. Dubbo(一)Dubbo资料

    这个资料绝对权威了:http://dubbo.io/user-guide/

  6. Delphi下如何使程序在Win7/Vista上用管理员权限运行(转)

    Delphi程序必须在资源里面嵌入MANIFEST信息 一 首先编辑一个文件,内容如下: <?xml version="1.0" encoding="UTF-8&q ...

  7. Dubbo--简单介绍

    Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,能够和Spring框架无缝集成.Dubbo致力于提供高性能和透明化的RPC远程服务调用 ...

  8. 深入Asyncio(七)异步上下文管理器

    Async Context Managers: async with 在某些场景下(如管理网络资源的连接建立.断开),用支持异步的上下文管理器是很方便的. 那么如何理解async with关键字? 先 ...

  9. 膨胀和腐蚀 - cvErode() 和 cvDilate() 函数实现

    前言 膨胀就是对图中的每个像素取其核范围内最大的那个值,腐蚀就相反.这两个操作常用来突出显示图的某个高亮部分或者昏暗部分以及去噪.本文展示两个分别对图像进行膨胀和腐蚀的例子. 膨胀和腐蚀函数 cvEr ...

  10. 目标跟踪之camshift---opencv中meanshift和camshift例子的应用

    在这一节中,主要讲目标跟踪的一个重要的算法Camshift,因为它是连续自使用的meanShift,所以这2个函数opencv中都有,且都很重要.为了让大家先达到一个感性认识.这节主要是看懂和运行op ...