ImageDrawer.js图片绘制插件有以下一些可用的配置参数。
-
Duration:整个动画或每个步骤的绘制时间(以秒为单位)
-
Background:在绘图时将颜色放在图片上
-
Callback:绘画结束时调用onece的函数
-
Pencil:绘图铅笔图像的选项对象
-
Width:铅笔图像宽度
-
Height:铅笔图像高度
-
marginTop:图片上的铅笔图像上边距
-
Marginalft:图片上的铅笔图像上边距
-
Disappear:绘图完成后,使铅笔消失的秒数
-
fromBottom:从图片的底部开始绘图
-
invertAxis:垂直绘制图像
-
Src:铅笔图像路径
效果案例:网络不佳这下载观看
<!DOCTYPE html> <html> <head> <title>动态绘图</title> <link rel="stylesheet" type="text/css" href="http://p8sv0x8g6.bkt.clouddn.com/imagedrawer.css"> <style type="text/css"> html, body, #main { margin: 0px; padding: 0px; overflow: hidden; 100%; height: 100%; min- 100%; max- 100%; min-height: 100%; max-height: 100%; } #container { 1000px; margin: auto; margin-top: 50px; } #container img { 100%; height: 100%; } </style> </head> <body> <div class="htmleaf-container"> <div id="main"> <div id="container"> <img id="bob" src="http://p8sv0x8g6.bkt.clouddn.com/imgdrm.jpg"> </div> </div> </div> <script src="http://p8sv0x8g6.bkt.clouddn.com/jquery-2.1.1.min.js"></script> <script src="http://p8sv0x8g6.bkt.clouddn.com/imagedrawer.js"></script> <script type="text/javascript"> $(document).ready(function () { $('div#container').drawImage(); }); </script> </body> </html>