<!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>
相关推荐
MSN手写支持组件msink 超级好用的一个软件附加,下载后直接安装即可
桌面鼠标手写输入法桌面鼠桌面鼠标手写输入法标手写输入法
javascript手写电子签名生成图片
windows 下C++实现触摸屏手写签名以及保存签名图片
c#版的手写模拟键盘输入工具,非常好用,可以运用到触摸屏上,c#版的手写模拟键盘输入工具,非常好用,可以运用到触摸屏上,c#版的手写模拟键盘输入工具,非常好用,可以运用到触摸屏上,不提供源码,完全可以调用。
uniapp 中微信小程序手写电子签名组件,下载即用,有问题随时联系我哈
鼠标手写输入法_不错的鼠标手写工具,送给亲朋的好礼物。
本人手写的一款js树形控件,附带图片,代码简洁,注释齐全,可读性高,易于维护,方便移植,结构清晰,思路明了,界面美观,同时支持异步加载...试问,你拥有了自己的手写js树之后,你还会对jquery或ext的树感兴趣吗?
原生js结合jquery手写树形插件,详解编码思路,具体可使用示例,下载即可使用
云手写输入法 支持联想 直接饮用鼠标操作 简单快捷
用于手写输入的设备有许多种,比如电磁感应手写板、压感式手写板、触摸屏、触控板、超声波笔等。 手写识别属于文字识别和模式识别范畴,文字识别从识别过程来说分成脱机识别(off-line)和联机识别(on-line)两大类...
鼠标手写输入法2011增强版可以用鼠标手写,速度快,识别率高,方便实用。
实现 iOS 手写电子签名的组件.zip,swift中ios的签名组件
用于手写输入的设备有许多种,比如电磁感应手写板、压感式手写板、触摸屏、触控板、超声波笔等。 手写识别属于文字识别和模式识别范畴,文字识别从识别过程来说分成脱机识别(off-line)和联机识别(on-line)两大类...
逍遥笔手写工具,windows系统运行安装,鼠标手写。XP及任意32位系统都适用。亲测可用
不会打字人的福音,直接用鼠标就可以当手写板写字
用鼠标来写字。相信很多人用过真实的手写板,这里有一款用鼠标写字的软件,试试看,不会打字的更要试试了。
无线手写板鼠标
搜狗手写板 最好用的手写板 鼠标手写 貌似目前最好用最小巧的 独立提取的
用于鼠标在桌面直接手写输入文字,以方便那些不会通过键盘输入文字的人。绿色软件,不占空间,无需安装。