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;
            width: 100%;
            height: 100%;
            min-width: 100%;
            max-width: 100%;
            min-height: 100%;
            max-height: 100%;
        }

        #container {
            width: 1000px;
            margin: auto;
            margin-top: 50px;
        }
            #container img {
                width: 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>