插件描述：放入图片会自动解析色调，并依次将颜色绘制出来
imagedrawer.js
使用方法
使用该动态绘制图片插件需要在页面中引入imagedrawer.css，jquery和imagedrawer.js文件。
1 2 3 4 5 | <head> <script type="text/javascript" src="js/imagedrawer.js"></script> <link rel="stylesheet" type="text/css" href="css/imagedrawer.css" /></head> |
在页面中插入你需要绘制的图片。
1 2 3 4 5 | <body> <div id="container"> <img id="imageto-draw" src="./img/myImage.jpg" /> </div></body> |
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该图片绘制插件。
1 | $('div#container').drawImage(); |
ImageDrawer.js图片绘制插件有以下一些可用的配置参数。
Duration：整个动画或每个步骤的绘制时间（以秒为单位）
Background：在绘图时将颜色放在图片上
Callback：绘画结束时调用onece的函数
Pencil：绘图铅笔图像的选项对象
Width：铅笔图像宽度
Height：铅笔图像高度
marginTop：图片上的铅笔图像上边距
Marginalft：图片上的铅笔图像上边距
Disappear：绘图完成后，使铅笔消失的秒数
fromBottom：从图片的底部开始绘图
invertAxis：垂直绘制图像
Src：铅笔图像路径
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 纯js响应式轮播图
- 下一个特效： canvas背景纸飞机鼠标跟随