如何用canvas实现在线签名?

随着计算机和网络技术的飞速发展,在线签名技术越来越多的被应用在无纸化办公中,这种直观便利的操作不仅可以大幅提升办公效率,而且使用数字化存储方式,避开了传统的纸质签字存储查阅困难等问题。在我们在日常生活中,已经有很多场景使用在线签名技术,例如:pos机刷卡签字、快递签收签字、银行或机关单位业务办理签字等。最近在做公司的业务办理需求,里面也涉及到在线签名,我们采用的 Canvas 技术实现,接下来,让我们来聊聊如何使用 Canvas 实现在线签名吧! 什么是 Canvas? Canvas 是 HTML5 新增的元素,用于在网页上绘制图形,它由 Apple 在 Safari 1.3 Web 浏览器中引入,之所以对 HTML 扩展的原因在于, HTML 在 Safari 中的绘图能力能为 Mac OS X 桌面的 Dashboard 组件所使用,并且 Apple 也希望有一种方式可以在 Dashboard 中支持脚本化的图形。Firefox 1.5 和 Opera 9 这两个浏览器也紧随 Safari 的引领,开始支持 Canvas 。 现在,Canvas 标签已经是 HTML5 最伟大的改进之一,因为它可以让我们在不使用图片的情况下实现网页的图形设计。它就像一块画布,本身没有绘制能力,但却把绘制 API 展现给客户端 JavaScript,我们借助 JavaScript 的支持,在画布范围内尽情发挥,达到想要的效果。 技术选型 这个功能无论是 Canvas、SVG 或是 […]

聊聊618作战指挥室大屏动画

如火六月, 年度618给我们送来一缕清风,这是个与“双11”遥相呼应的又一大全民网购狂欢节(PS:你剁手了吗?) ,秉承着只为品质生活的宗旨,带我们进入前所未有的品质狂欢盛宴。618期间战场硝烟弥漫,全体JDers火力全开!作为研发MM的我,也接到了618作战指挥室大屏项目。而今,激情high战的红六月已渐渐远去,那么随我一起来浅解析一下本次618作战指挥室大屏动画吧! 说到动画,不知道大家还记不记得手翻书。我们小时候曾经玩过的(甚至画过的)这种通过快速翻页产生动画效果的小册子。   先让我们先回味一下手翻书动画(demo图片)。 1、GIF动画 试想如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,是不是就可构成一种最简单的动画。我们熟知的GIF图实现原理就类似于这样, 当我们把上面的GIF图在PS中打开时,就可以看到时间轴上很多帧图片。 下面是页面全景图版块文字闪烁效果。 接到这个需求效果,我们是不是最先想到用GIF图实现,因为它成本低,使用方便,只需要设计设计好直接使用就可以。 但是我们却一时忽略GIF图有它的短板: 我们无法在css层面上修改一些参数,不能直接控制持续时间、循环次数、是否暂停,GIF一旦生成,参数就固定定了。可以执行比较差、对于调试很不方便。 所有能使用的颜色数量呗限制在256色。 不具备Alpha透明的特性,即使做成透明的,毛边锯齿也会让我们抛弃它。 因为我们这次的页面背景是流转的云朵和星空,为了不遮挡背景效果,所以我们放弃利用GIF去实现。 这时你可能会说,那用APNG呀! 确实,在实现的时候我们也考虑过,但最终我们确认本次大屏幕使用Chrome浏览器,而APNG并没有得到该浏览器支持。   2、逐帧动画 GIF图和APNG的路都被我们断掉,这时让我们想到了和GIF有着相同共性的CSS逐帧动画。说到逐帧动画,可能有些人会问,什么是逐帧动画呢? 引用百度百科的介绍: “逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。” 那如何实现逐帧动画呢? 其实实现逐帧动画的秘籍是使用steps() 这个调速函数。steps()这个调速函数会根据你设置的步数量,把动画分成多个帧,让整个动画在帧与帧之间硬切,之前我们对于这种硬切效果是避之不及的,然而,正是因为这种硬切,完美的实现了我们想要的效果。究其原理就是使用一张含有多帧静态画面的精灵图片,通过切换 background-position使其变为连续的动画。对于这一技巧,我们要感谢Simurai, 在他的个人网站中提到使用steps()实现这种精灵动画。 说完它的实现原理,大家是不是更希望知道如何使用它呢? 首先我们要知道,steps(number_of_steps, direction)这个调速函数接受两个参数: 第一个参数:动画每两个帧之间的间隔数。这个参数并不指代整个动画的间隔,使用的时候应该注意。 第二个参数:可以接收start或是end(默认的),这个参数可以指定动画在每个循环周期的什么位置发生帧的切换动作。 接下来,我们再借助W3C官网对steps()函数的剖析图来理解一下。 看完这张图我们是不是豁然开朗了呢!了解完它的参数,下面让我们来看一下,本次大屏的文字闪动效果,我们是如何实现的: 第一种:

第二种:

这里我们还可以使用step-start 和step-end 替换 steps(1, start) 和steps(1, end)。顺便安利一个帧数计算器工具。   2、补间动画 聊完逐帧动画,现在我们来说补间动画。不同于逐帧动画在两个帧之间的硬切,补间动画需要在两个帧之间进行插值运算,从而产生平滑的过渡效果。 好的动画需要我们呈现真实的效果,如何让我们制作的动画感觉更真实,无疑成为我们写动画需要特别关注的点,动画看似简单,其实是个细节活。生硬的动过效果,不仅不会给我们页面锦上添花,反而会让用户更加无法直视。如何想要动画真实,我们首先需要让它遵循自然的规律。 如图,当我们把一个小球,自由释放的时候,它并不是匀速下落的,而是会越来越快,碰到地板也不会立即停止,而是反弹几次,最终静止在地板上。记得初中的物理课本有论述过,对任何物体,无论是运动还是静止,无论是运动状态改变还是不变,物体都具有惯性。小球的下落就是遵循了这种自然规律。 下面我们来看大屏一个流量汇入的动画效果(demo地址),看到这个动画,大家是不是很想知道它是如何实现的。 下面我们就来聊聊他的实现过程。 其实,接到动画的时候我们切忌不要立即去码代码,而是应该先构思一下动画的布局,和设计师沟通好每节动画的效果,然后把动画拆解开来,这样不仅可以让我们思路更清晰,而且也可以减少后期修改的次数。 我们知道补间动画主要是通过animation/transition结合 transfrom/opacity 实现的。如果我们在制作的时候没有思路,也许Animate.css这个网站可以帮助你。 下面我们拿上面动画一个分支举例: 从图中我们可以获取X轴的偏移量、Y轴的偏移量和旋转球形路径的直径R。知道元素路径的直径R之后,我们就可以设置旋转元素的基点位置:transform-origin: […]

© 2018 JDC. All Rights Reserved.