你的位置:首页 > 软件开发 > ASP.net > HTML5 中canvas支持触摸屏的签名面板

HTML5 中canvas支持触摸屏的签名面板

发布时间:2015-11-17 12:00:04
1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其中有第一天上班就加班到10点的,有一家公司在体育西路 ...

1.前言

       最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其中有第一天上班就加班到10点的,有一家公司在体育西路那边,太远,第一天回家挤公交也是太累,以前上班都是走路上班的,自己确实不适合挤公交,还有的公司面试的时候和你说什么大数据,性能优化什么的,进公司一看,他们就是用的最简单的三层,没有什么设计模式,总之太多心酸,幸运的是现在这家公司还不错,找工作就是要宁缺毋滥。

2.canvcas标签

canvas基础教程:<canvas> 标签定义图形,比如图表和其他图像。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。甚至可以在 canvas 上创建并操作动画,这不是使用画笔和油彩所能够实现的。跨所有 web 浏览器的完整 HTML5 支持还没有完成,但在新兴的支持中,canvas 已经可以在几乎所有现代浏览器上良好运行。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。来公司一个月了主要也是学习为主,我是做后台开发,以前也没有用过Oracle数据库,这一个月也主要是学习H5的一些新特新,还有就是css3.0,在就是Oracle在服务器上面的安装部署,一些数据导入导出,数据备份啥的,前端的东西都比较差,现在也是一个学习的机会,就当好好学习了。

3.手写签名面板

公司做的是自动化办公OA系统,一些审核的地方需要加入一些手写签名的功能,刚开始做这个也是没有思路,在网上也找了一下资料,后来发现H5有这个canvcas新标签,感到格外是欣喜。于是拿过来试一下,还真可以。

HTML5 中canvas支持触摸屏的签名面板HTML5 中canvas支持触摸屏的签名面板

4.页面代码

@{  Layout = null;}<!DOCTYPE html><html><head>  <meta name="viewport" content="width=device-width" />  <title>Testpage</title>  <script src='/images/loading.gif' data-original="~/Assets/jquery-2.1.1.js"></script>  <script src='/images/loading.gif' data-original="~/Assets/bootstrap/bootstrap.js"></script>  <link href="~/Assets/bootstrap/bootstrap.css" rel="stylesheet" />  <script src='/images/loading.gif' data-original="~/Scripts/WritingPad.js"></script>  <script src='/images/loading.gif' data-original="~/Assets/jq-signature.js"></script></head><body style="background-color:#b6ff00">  <button class="btn btn-primary" type="button" style="position:relative">点击我</button></body></html><script>  $(function () {    $(".btn,.btn-primary").click(function () {      var wp = new WritingPad();      //wp.init();    });  });</script>

原标题:HTML5 中canvas支持触摸屏的签名面板

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。