制作手写签名

<!DOCTYPE html>
<!-- saved from url=(0056)http://hao2013.cn/canvas-special-master/brush/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>签名板(支持移动端)</title></head><style type="text/css">* {margin: 0;padding: 0;}.canvas {/*width: 100%;*/display: block;border: 1px solid red;}#clear,#clear1,#save {margin: 0 auto;display: inline-block;padding: 5px 10px;width: 50px;height: 40px;line-height: 40px;border: 1px solid #C8C7CC;background: #cccccc;border-radius: 10px;text-align: center;margin: 20px auto;cursor: pointer;}</style><body data-ext-version="1.4.2"><canvas id="canvas" width="600" height="600" style="background: #CCCCCC;">您的浏览器不支持canvas技术,请升级浏览器!</canvas><div style="text-align: center"><span id="clear">清空</span><span id="save">保存</span></div></body><script type="text/javascript">function WriteFont(id, options) {var self = this;this.canvas = document.getElementById(id);var obj = {canvas: this.canvas,context: this.canvas.getContext("2d"),isWrite: false, //是否开始lastWriteTime: -1,lastWriteSpeed: 0,lastWriteWidth: 0,canvasWidth: 600, //canvas宽高canvasHeight: 600,isShowBorder: true, //是否显示网格bgColor: '#ccc', //背景色borderWidth: 2, // 网格线宽度borderColor: "#fff", //网格颜色lastPoint: {}, //writeWidth: 2, //基础轨迹宽度maxWriteWidth: 30, // 写字模式最大线宽minWriteWidth: 1, // 写字模式最小线宽writeColor: '#000', // 轨迹颜色isWriteName: false //签名模式}for (var name in options) {obj[name] = options[name];}/*** 轨迹宽度*/this.setLineWidth = function() {var nowTime = new Date().getTime();var diffTime = nowTime - obj.lastWriteTime;obj.lastWriteTime = nowTime;var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;if (returnNum < obj.minWriteWidth) {returnNum = obj.minWriteWidth;} else if (returnNum > obj.maxWriteWidth) {returnNum = obj.maxWriteWidth;}returnNum = returnNum.toFixed(2);//写字模式和签名模式if (obj.isWriteName) {obj.context.lineWidth = obj.writeWidth;} else {obj.context.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;}}/*** 绘制轨迹*/this.writing = function(point) {obj.context.beginPath();obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);obj.context.lineTo(point.x, point.y);self.setLineWidth();obj.context.stroke();obj.lastPoint = point;obj.context.closePath();}/*** 轨迹样式*/this.writeContextStyle = function() {obj.context.beginPath();obj.context.strokeStyle = obj.writeColor;obj.context.lineCap = 'round';obj.context.lineJoin = "round";}/*** 写开始*/this.writeBegin = function(point) {obj.isWrite = true;obj.lastWriteTime = new Date().getTime();obj.lastPoint = point;self.writeContextStyle();}/*** 写结束*/this.writeEnd = function() {obj.isWrite = false;}/*** 清空画板*/this.canvasClear = function() {obj.context.save();obj.context.strokeStyle = '#fff';obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);if (obj.isShowBorder && !obj.isWriteName) {obj.context.beginPath();var size = obj.borderWidth / 2;//画外面的框obj.context.moveTo(size, size);obj.context.lineTo(obj.canvasWidth - size, size);obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);obj.context.lineTo(size, obj.canvasHeight - size);obj.context.closePath();obj.context.lineWidth = obj.borderWidth;obj.context.strokeStyle = obj.borderColor;obj.context.stroke();//画里面的框obj.context.moveTo(0, 0);obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);obj.context.lineTo(0, obj.canvasHeight / 2);obj.context.lineTo(0, obj.canvasHeight);obj.context.lineTo(obj.canvasWidth, 0);obj.context.lineTo(obj.canvasWidth / 2, 0);obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);obj.context.stroke();}obj.context.restore();}/*** 保存图片 格式base64*/this.saveAsImg = function() {var image = new Image();image.src = this.canvas.toDataURL("image/png");if (image.src == this.emptyCanvas) {alert('请先书写')} else {console.log('提交的内容===>', image.src)}};/*** 初始化画板*/this.canvasInit = function() {this.canvas.width = obj.canvasWidth;this.canvas.height = obj.canvasHeight;this.emptyCanvas = this.canvas.toDataURL("image/png");}/**======================事件绑定===========================**/this.canvas.addEventListener('mousedown', function(e) {var point = {x: e.offsetX || e.clientX,y: e.offsetY || e.clientY};self.writeBegin(point);});this.canvas.addEventListener('mouseup', function(e) {var point = {x: e.offsetX,y: e.offsetY};self.writeEnd(point);});this.canvas.addEventListener('mouseleave', function(e) {var point = {x: e.offsetX,y: e.offsetY};self.writeEnd(point);});this.canvas.addEventListener('mousemove', function(e) {if (obj.isWrite) {var point = {x: e.offsetX,y: e.offsetY};self.writing(point);}});//移动端this.canvas.addEventListener('touchstart', function(e) {var touch = e.targetTouches[0];var point = {x: touch.pageX || touch.clientX,y: touch.pageY || touch.clientY};self.writeBegin(point);});this.canvas.addEventListener('touchend', function(e) {var touch = e.changedTouches[0];var point = {x: touch.pageX,y: touch.pageY};self.writeEnd(point);});this.canvas.addEventListener('touchmove', function(e) {var touch = e.targetTouches[0];var point = {x: touch.pageX,y: touch.pageY};self.writeEnd(point);});this.canvas.addEventListener('touchmove', function(e) {var touch = e.targetTouches[0];var point = {x: touch.pageX,y: touch.pageY};self.writing(point);});this.canvasInit();this.canvasClear();this.option = obj;obj.control = {clearCanvas: self.canvasClear};}/*** 初始化调用* 设置参数*/var writeCanvas = new WriteFont('canvas', {borderWidth: 10,writeWidth: 3,borderColor: '#ff6666',isWriteName: true //签名模式});document.getElementById('clear').onclick = function() {writeCanvas.option.control.clearCanvas();};document.getElementById('save').onclick = function() {writeCanvas.saveAsImg()};</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/247890.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

制作手写签名

相关文章

python第五次作业——陈灵院

iOS 二叉树相关算法实现

vux 组件库首次使用安装

@Component 和 @Bean 的区别

js动态验证码获取

Base64 算法原理，以及编码、解码【加密、解密】介绍

js通过身份证获取年龄

爬取豆瓣top250

TCP/IP，Http，Socket，XMPP的区别

LED音乐频谱之点阵

上架相关——App Store 上架流程

this.$router 的三种跳转页面方法

cf777c

上架相关——appstore 更新app版本

输入框输入数字，且不能有小数点存在

iOS开发蓝牙技术4.0详解

前端面试题（五）

qrcode.js 二维码生成器

SQL -- 多表查询

如何解决两个相邻的span中间有空隙