`
kissmett
  • 浏览: 39999 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js手写组件,支持触屏和鼠标;

 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> Sign </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <script type="text/javascript">
  <!--
	window.onload = function() {
    new lineCanvas({
        el: document.getElementById("canvas"),//绘制canvas的父级div
        clearEl: document.getElementById("clearCanvas"),//清除按钮
        saveEl: document.getElementById("saveCanvas"),//保存按钮
        //      linewidth:1,//线条粗细,选填
        //      color:"black",//线条颜色,选填
        //      background:"#ffffff"//线条背景,选填
    });
};
function lineCanvas(obj) {
    this.linewidth = 1;
    this.color = "#000000";
    this.background = "#ffffff";
    for (var i in obj) {
        this[i] = obj[i];
    };
    this.canvas = document.createElement("canvas");
    this.el.appendChild(this.canvas);
    this.cxt = this.canvas.getContext("2d");
    this.canvas.width = this.el.clientWidth;
    this.canvas.height = this.el.clientHeight;
    this.cxt.fillStyle = this.background;
    this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
    this.cxt.strokeStyle = this.color;
    this.cxt.lineWidth = this.linewidth;
    this.cxt.lineCap = "round";

	this.mouseCanDraw = false;
	this.canvasOffsetX = this.el.offsetLeft;
	this.canvasOffsetY = this.el.offsetTop;

    //开始绘制
    this.canvas.addEventListener("touchstart", function(e) {
        this.cxt.beginPath();
        x = e.changedTouches[0].pageX - this.canvasOffsetX;
        y = e.changedTouches[0].pageY - this.canvasOffsetY;  
        this.cxt.moveTo(x,y );
    }.bind(this), false);
	this.canvas.addEventListener("mousedown", function(e) {
        this.cxt.beginPath();
        x = e.clientX - this.canvasOffsetX;
        y = e.clientY - this.canvasOffsetY;
        this.cxt.moveTo(x,y);
		this.mouseCanDraw = true;
    }.bind(this), false);

    //绘制中
    this.canvas.addEventListener("touchmove", function(e) {
        x = e.changedTouches[0].pageX - this.canvasOffsetX;
        y = e.changedTouches[0].pageY - this.canvasOffsetY;        
        this.cxt.lineTo(x,y);
        this.cxt.stroke();
    }.bind(this), false);
    this.canvas.addEventListener("mousemove", function(e) {
		if(this.mouseCanDraw){
			x = e.clientX - this.canvasOffsetX;
			y = e.clientY - this.canvasOffsetY;
			this.cxt.lineTo(x,y);
			this.cxt.stroke();
		}
    }.bind(this), false);
    //结束绘制
    this.canvas.addEventListener("touchend", function() {
        this.cxt.closePath();
    }.bind(this), false);
    this.canvas.addEventListener("mouseup", function() {
		this.mouseCanDraw = false;
        this.cxt.closePath();
    }.bind(this), false);
    //清除画布
    this.clearEl.addEventListener("click", function() {
        this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }.bind(this), false);
    //保存图片,直接转base64
    this.saveEl.addEventListener("click", function() {
        var imgBase64 = this.canvas.toDataURL();
        console.log(imgBase64);
		document.getElementById("img").src=imgBase64;

    }.bind(this), false);
};

  //-->
  </script>
  
 </head>

 <body>
<br>
  <div id="canvas" style="height:200px;width:400px;border:solid;border-width:1px;" ></div>
  <button id="clearCanvas" >clear</button>
  <button id="saveCanvas" >save</button>

 <br>
  <img id="img" src="" style="height:200px;width:400px;border:solid;border-width:1px;" />
 </body>
</html>

 

分享到:
评论

相关推荐

    手写签名js插件

    手写签名JS插件是一种基于JavaScript技术实现的交互式组件,专为电子设备(包括PC和移动设备)设计,提供用户在屏幕上进行手写签名的功能。这种插件在电子合同平台中尤为常见,因为它们能够方便用户在无纸化环境中...

    js手写输入在线搜索rar

    【标题】"js手写输入在线搜索rar" 涉及的主要知识点是JavaScript(JS)在实现手写输入和在线搜索功能方面的应用。这通常包括交互式用户界面的设计、事件处理、图像处理以及可能的数据存储和检索。 【描述】中的...

    移动端 jquery+html5 手写签名(横屏)

    本项目通过结合jQuery、HTML5和CSS3技术,提供了一种横屏模式下的手写签名解决方案,支持完美回显和复用。接下来,我们将详细探讨这些技术在实现这一功能时所扮演的角色以及具体实现步骤。 首先,jQuery是一个轻量...

    网页手写输入法代码和控件

    6. **响应式设计**:考虑到不同设备的屏幕大小和输入方式,手写输入法需要具备响应式设计,确保在手机、平板和电脑上都能良好工作,同时适应触屏和鼠标输入。 7. **跨平台兼容性**:由于浏览器之间的差异,可能需要...

    一个基于canvas开发,封装于Vue组件的通用手写签名板

    3. **触摸事件适配**:为了兼容移动端,项目需要处理触摸事件,如`touchstart`、`touchmove`和`touchend`,使得用户可以在触摸屏设备上进行签名。 4. **签名操作**:提供重新签名和覆盖签名功能,意味着需要清除...

    html5 签名组件

    Mobile则暗示了这个签名组件是为移动设备优化的,可能支持触屏操作,如滑动、轻触等手势。这使得组件不仅适用于桌面环境,还能在智能手机和平板电脑等移动设备上提供良好的用户体验。 JSignature是另一个提及的标签...

    百度手写输入法源码 v1.0

    1. **事件处理**:手写输入需要监听用户的鼠标或触摸事件,如开始书写、移动轨迹、结束书写等,这些都由JavaScript事件处理函数来实现。 2. **画布操作**:HTML5的Canvas元素为手写输入提供了画布,通过JavaScript...

    H5电子签名--jSignature插件

    在H5环境下,用户可以通过触控设备或鼠标模拟手写动作,实现在网页上签署姓名或盖章。 `jSignature`是一个轻量级的jQuery插件,专门用于实现H5环境中的电子签名功能。它支持多种输出格式,如PNG、SVG和JSON,方便...

    手写功能代码JSP——需要抄写

    前端部分,用户在Canvas上绘制时,可以监听鼠标或触屏事件,将路径数据转化为JSON格式并通过AJAX发送到后端。后端接收到数据后,可以将这些数据保存到数据库,或者进行进一步处理。 在JSP页面中,我们可以创建一个...

    FLASH手写输入板插件

    在没有触摸屏设备的情况下,这个插件可以让用户通过鼠标或数字笔在屏幕上模拟书写汉字或其他字符,提高了非键盘输入的便捷性和自然度。 描述中提到的“很方便,很实用”,意味着该插件设计得用户友好,能够方便地...

    web 手写面板签名插件

    【标题】:“Web手写面板签名插件”是一种在网页上实现手写签名功能的工具,它使得用户可以在浏览器上模拟纸笔签名的过程,并将签名数据以特定格式存储,便于进一步处理和应用。 【描述】:这个插件是基于HTML技术...

    完整版uniapp手写板,签字,签名

    2. Vue.js:Vue.js是uni-app的基础,它是一个轻量级的JavaScript前端框架,以其简单易学、高性能和灵活性受到广泛欢迎。Vue.js的核心特性包括虚拟DOM、响应式数据绑定、指令系统和组件化。在uni-app中,Vue.js被用来...

    Windows手写签字.rar

    这通常通过捕获用户在触摸屏或手写板上的笔迹来完成。在本项目中,可能使用了HTML5的Canvas元素,这是一个二维绘图区域,可以动态绘制图形和线条。用户在Canvas上移动鼠标或触笔时,系统记录下每一笔的坐标,形成...

    jQuery云输入法加手写输入法代码.zip

    在网页上实现手写输入,需要用到canvas元素,通过JavaScript来捕捉鼠标或触屏设备的移动轨迹,将用户的书写动作转化为数字信号。然后,这些信号会被发送到服务器进行识别,服务器返回识别结果后,再在页面上显示出来...

    vue-sign-canvas-master.zip

    - **事件绑定**:Vue.js的事件绑定机制使得组件能够监听用户的触摸或鼠标事件,根据这些事件来更新canvas上的线条。 - **响应式设计**:为了适应不同尺寸的屏幕,Vue-sign-canvas可能采用了CSS媒体查询和Vue的响应...

    vue移动端轮播图(触摸滑动滚动、自动轮播、无缝滚动、循环无回滚)

    总结来说,这个基于Vue的移动端轮播图项目涵盖了前端开发中的多个重要知识点,包括Vue组件化、触摸事件处理、CSS3动画以及JavaScript时间管理和状态控制。通过学习和实践这个项目,前端初学者不仅可以掌握轮播图的...

    wangeditor扩展插件

    myscriptMath提供了一个模拟纸面的手写区域,用户可以用鼠标或触摸屏进行手写输入。这一功能支持识别各种数学和科学符号,无论是简单的加减乘除,还是复杂的函数和积分,都能准确地转化为数字或公式。这种交互方式...

    js实现手工签字,方便确认

    "js实现手工签字"的功能允许用户在屏幕上通过触控设备或者鼠标进行签名,然后将签名数据存储并可以展示或者进一步处理。这个功能在电子商务、电子合同、物流配送等领域广泛应用。本文将深入探讨如何使用JavaScript来...

    jsignature-master.zip

    为了在触屏和非触屏设备上提供一致的体验,jsignature库需要处理两种类型的事件:touch事件(用于触屏)和mouse事件(用于鼠标操作)。当用户在屏幕上滑动时,库会监听并处理`touchstart`、`touchmove`和`touchend`...

    CSS-DOCK-menu

    总的来说,CSS-DOCK-menu是一个结合了CSS、jQuery和JavaScript技术的网页组件,它能够帮助开发者快速创建出类似苹果Dock栏的动态菜单,为用户提供丰富的交互体验。通过理解和应用这些技术,开发者可以进一步提升网页...

Global site tag (gtag.js) - Google Analytics