jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)


Posted in Javascript onFebruary 25, 2016

ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件。通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣。

jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)

效果展示       源码下载

使用方法

使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件。

<link rel="stylesheet" href="css/imagedrawer.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/imagedrawer.js"></script>

HTML结构

在页面中插入你需要绘制的图片。

<div id="container">
<img id="example" src="img.jpg">
</div>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该图片绘制插件。

$('div#container').drawImage();

配置参数

ImageDrawer.js图片绘制插件有以下一些可用的配置参数。

$(div#container).drawImge({
duration: 20, @number - seconds it's take to draw the entire picture
Instead of specifying the duration on the whole animation,
|| { it's also possible to set the duration of single drawing phases:
borderPencil : 9, @number - seconds it's take to draw the picture by using only the pencil for borders
pencilShades : 6, @number - seconds it's take to draw sharpest shades with black pencil
colorShades : 7.5, @number - seconds it's take to draw first, basic, vanish colors
fullColors : 7.5 @number - seconds it's take to define better all colors on the picture
},
background: '#949494', @string - background color for image while it's been drawing
callback: fn(), @function - function to execute after the last phase
pencil: {
height: '50px',
width : '50px',
src : './img/pencil.png' @string - path to the pencil image
}
});

duration:绘制动画的持续时间。可以是一个整数,或是一个对象:

{
borderPencil : 9, 
pencilShades : 6, 
colorShades : 7.5, 
fullColors : 7.5 
}

borderPencil:绘制边框需要的时间。
pencilShades:绘制黑白阴影部分需要的时间。
colorShades:绘制彩色阴影需要的时间。
fullColors;填充颜色需要的时间。
background:画布的背景颜色。

callback:回调函数。

pencil:在画布上方显示的铅笔小图标。

以上所述是小编给大家介绍的jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
javascript实现的动态文字变换
Jul 28 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
详解puppeteer使用代理
Dec 27 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
利用jQuery中的ajax分页实现代码
Feb 25 #Javascript
Jquery zTree 树控件异步加载操作
Feb 25 #Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 #Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 #Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 #Javascript
jquery zTree异步加载简单实例讲解
Feb 25 #Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 #Javascript
You might like
967 个函式
2006/10/09 PHP
mysql时区问题
2008/03/26 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
详解php用static方法的原因
2018/09/12 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
TypeScript入门-基本数据类型
2017/03/28 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
python基础教程之常用运算符
2014/08/29 Python
使用python编写监听端
2018/04/12 Python
详解python运行三种方式
2019/05/13 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
《藤野先生》教学反思
2014/02/19 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL
Python实现照片卡通化
2021/12/06 Python