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>
ImageDrawer.js图片绘制插件的更多相关文章
- 支持无限加载的js图片画廊插件
natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...
- 开源JS图片裁剪插件
开源JS图片裁剪插件 一.总结 一句话总结: 要用点赞最高的插件,这样适用性最好,效果最好,出问题的概率也最低,这里电脑端和手机端都可以用的建议用 cropper.js 二.5款好用的开源JS图片裁剪 ...
- 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件
前 言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...
- 分享一个自己写的基于canvas的原生js图片爆炸插件
DEMO访问地址: https://bupt-hjm.github.io/BoomGo/博客地址: http://bupt-hjm.github.io/2016/07/10/boom/插件及使用方法地 ...
- JS导出PDF插件（支持中文、图片使用路径）
在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题.它的效果可以先到http://pdfmake.org/playgroun ...
- 13个JavaScript图表（JS图表）图形绘制插件【转】
现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...
- ImageLightbox.js – 响应式的图片 Lightbox 插件
ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- 13个JavaScript图表（JS图表）图形绘制插件
转自:http://blog.jobbole.com/13671/ 1. Flash 过去是最佳解决方案,但很多人多在从那迁移: 2. 现代浏览器及其更强大的计算能力,使其在转化绘制实时数据方面的能力 ...
随机推荐
- eclipse工具类及插件（修改eclipse.ini文件及作者名字）
https://jingyan.baidu.com/album/9158e0005633c0a254122807.html?picindex=1 (修改eclipse.ini文件及作者名字) http ...
- c++中关于预编译头的设置问题
在运行代码时会遇到缺少预编译pch.c 或者stadfx.h之类的, 这个时候,先查看有没有包含, 然后看一下预编译头设置中, 是否正确设置.
- wc语法2
wc命令的功能为统计指定文件中的字节数.字数.行数, 并将统计结果显示输出. 语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同 ...
- 关于Ble通信库BluetoothKit的使用 以及可能出现的问题分析
首先,这个库是用于BLE(低功耗蓝牙)通信的,地址:https://github.com/dingjikerbo/BluetoothKit 当然,也可以选择根据andorid提供的底层接口自己完成这部 ...
- React Native backgroundColor 的颜色值
React Native 的 css 跟 web开发中css还是很相似的,其中 backgroundColor 支持的颜色值与 css 一致,为方便查找写在这里. 其他样式可以参考 CSS 样式网站 ...
- 官网下载MySQL最新版本的安装包
下载地址:http://www.mysql.com/downloads/ 1.选择下载社区版本 MySQL Community Edition (GPL)Community (GPL) Downloa ...
- Linux_x86下NX与ASLR绕过技术（续）
四.Stack Canaries 首先看一下Stack Canaries演进历史: Stack Guard 是第一个使用 Canaries 探测的堆栈保护实现,它于 1997 年作为 GCC 的一个扩 ...
- 第四次作业——关于石墨文档（Android）客户端的案例分析
关于石墨文档(Android)客户端的案例分析 作业地址:[https://edu.cnblogs.com/campus/nenu/2016CS/homework/2505] 第一部分调研,评测 1. ...
- ImageLorderUtil
import android.content.Context;import android.graphics.Bitmap;import android.os.Environment; import ...
- Game Physics Cookbook (Gabor Szauer 著)
Chapter1: Vectors Chapter2: Matrices Chapter3: Matrix Transformations Chapter4: 2D Primitive Shapes ...