利用 canvas 实现签名效果

使用插件  jSignature  github：https://github.com/brinley/jSignature

如果再H5 中使用需要加载  flashcanvas.js

方法：

方法名称 使用方法 说明
clear .jSignature("clear") 清空并重置画布
getData .jSignature("getData", "base30") 将画布转换为base64编码的数据字符串，可以在表单发布或提交时将其保存为任何数据库中的字符串
importData .jSignature("importData",dataurl) 使用从上述getData方法提取的数据URL更新现有的jSignature画布

选项参数：

参数名称 说明 默认值
width 定义画布的宽度。 没有％或px的数值（新版是可以使用百分比和px后缀的） 250
height 定义画布的高度。 没有％或px的数值（新版是可以使用百分比和px后缀的） 150
color 定义画布上笔画的颜色。 接受任何颜色十六进制值 #000
background-color 定义画布的背景颜色。 接受任何颜色十六进制值 #fff
lineWidth 定义线的厚度。 接受任何正数值（也是默认画布的横线的画笔的宽度） 1
cssclass 定义画布的自定义css类 None 
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

	<meta charset="utf-8">

	<meta name="renderer" content="webkit"/>

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

	<script src="libs/jquery.js"></script>

	<script type="text/javascript" src="libs/flashcanvas.js"></script><![endif]-->

	<style>

		html,body{

			height: 100%;

			margin: 0;

			padding: 0;

		}

		#signature{

			border: 2px solid #ccc;

			background-color:lightgrey;

		}

		.btn-package{

			position: absolute;

			top:10px;

			right: 10px;

		}

	</style>

</head>

<body>

<div id="signature"></div>

<div class="btn-package">

	<button class="reset">清除</button>

	<button class="get">获取</button>

</div>

<script src="libs/jSignature.min.js"></script>

<script>

	$(document).ready(function() {

		var $sigdiv = $("#signature")

		var h = $(window).height()-8;

		var sw = $(document.body).width()-4;

		console.log(sw);

		console.log(h);

		$sigdiv.jSignature({

			color: "#000",

			height: h,

			width: sw,

			lineWidth:3,

			"background-color": "#fff"

		});

		$('.reset').click(function(){

			$sigdiv.jSignature("reset")

		})

		$('.get').click(function(){

			var data = $sigdiv.jSignature('getData', 'image');

			var src = "data:" + data[0] + "," + data[1];

			console.log(src);

		})

	})

</script>

<script>

</script>

</body>

</html>

　　最后效果

利用 canvas 实现签名效果的更多相关文章

  1. canvas 实现签名效果

    效果图 概述 在线签名,现在在很多场景下都能看到,而且在移动端见的比较多. 用canvas和svg都可以实现,而且跨平台能力也很好. canvas基于像素,提供 2D 绘制函数,提供的功能更原始,适合 ...

  2. 利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果

    利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果 前言 近日公司接到一个轨道系统的需求,需要将地铁线路及列车实时位置展示在大屏上.既然是大屏项目,那视觉效果当然是第一重点,咱们可以先来看看项 ...

  3. canvas实现倒计时效果示例（vue组件内编写）

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  4. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  5. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  6. 小程序利用canvas 绘制图案 （生成海报， 生成有特色的头像）

    小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...

  7. 利用 canvas 破解 某拖动验证码

    利用 canvas 破解 某拖动验证码 http://my.oschina.net/u/237940/blog/337194

  8. 利用Canvas进行绘制XY坐标系

    首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所 ...

  9. 利用canvas实现的中点Bresenham算法

    Bresenham提出的直线生成算法的基本原理是,每次在最大位移方向上走一步,而另一个方向是走步还是不走步取决于误差项的判别,具体的实现过程大家可以去问度娘.我主要是利用canvas画布技术实现了这个 ...

  10. 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活

    使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果

随机推荐

  1. VisionOn：新一代在线制图工具，简单易用又高颜值

    Vision On 一款集流程图.思维导图.白板于一体的轻量级在线图形工具 在工作和学习过程中,通过可视化的图形,有助于清晰高效地表达我们的灵感.想法.思想. 工欲善其事,必先利其器. 目前,思维导图 ...

  2. C语言的指定初始化

    ----------------版权声明:本文为CSDN博主「Supan-Yang」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog ...

  3. 手把手教你搭建国产嵌入式模拟器SkyEye开发环境

    SkyEye介绍 SkyEye是一个开源软件(OpenSource Software)项目,中文名字是"天目".SkyEye的目标是在通用的Linux和Windows平台上实现一个 ...

  4. Nuitka打包

    Nuitka打包PySide6/PyQt 本文仅供本人知识总结使用,所以内容会比较浅显,不喜勿喷. 文章目录 Nuitka打包PySide6/PyQt 一.需要C++编译器 二.安装Nuitka 三. ...

  5. Element ui 动态自定义表格单元格样式

    最终实现效果 在Element UI 的文档中提到了用cell-style 方法来自定义单元格样式: 具体使用方法: 1. 在el-table 标签中添加 cell-style 绑定的自定义方法 2. ...

  6. 使用 Gradle 构建包含所有依赖的 JAR 包

    在 Gradle 中构建一个包含所有依赖的 jar 包(通常被称为"fat jar"或者"uber jar"),你可以使用 shadowJar 插件来包含编译的 ...

  7. MJUCTF—WP

    1.猫娘 点开发现有两个文件, 一个加密压缩包, 一个word文档 点开word发现是兽音加密, 点开在线网站进行解密 # 得到一段文本, 先进行分割 小小年内则伏勤, 阵阵寒风刺骨寒. 是处寂寞无人 ...

  8. 在.NET后端开发的十年之旅：反思与总结

    开局        依稀记得那是2014年11月大四上学期,学校已经没有课了.看着同寝室的其他室友都出去实习了,而我一个人还坐在电脑前发呆.因为的不敢出去面试. 由于小学时牙齿有一颗龅牙,从小就产生了 ...

  9. 【YashanDB知识库】YAS-02024 lock wait timeout, wait time 0 milliseconds

    [标题]错误码处理 [问题分类]锁等待超时 [关键字]YAS-02024 [问题描述]执行语句时候,因锁等待超时执行语句失败 [问题原因分析]数据库默认锁等待时间为0秒,如果执行语句存在锁等待过长会执 ...

  10. Redis集群slot迁移改造实践

    作者:来自 vivo 互联网存储团队- Xu Xingbao Redis 集群经常需要进行在线水平扩缩容,实际操作过程中发现迁移期间服务时延剧烈抖动,业务侧感知明显,为了应对以上问题对原生 Redis ...