ImageDrawer.js图片绘制插件
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>
