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图片绘制插件的更多相关文章

  1. 支持无限加载的js图片画廊插件

    natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...

  2. 开源JS图片裁剪插件

    开源JS图片裁剪插件 一.总结 一句话总结: 要用点赞最高的插件,这样适用性最好,效果最好,出问题的概率也最低,这里电脑端和手机端都可以用的建议用 cropper.js 二.5款好用的开源JS图片裁剪 ...

  3. 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件

      前  言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...

  4. 分享一个自己写的基于canvas的原生js图片爆炸插件

    DEMO访问地址: https://bupt-hjm.github.io/BoomGo/博客地址: http://bupt-hjm.github.io/2016/07/10/boom/插件及使用方法地 ...

  5. JS导出PDF插件（支持中文、图片使用路径）

    在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题.它的效果可以先到http://pdfmake.org/playgroun ...

  6. 13个JavaScript图表（JS图表）图形绘制插件【转】

    现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...

  7. ImageLightbox.js – 响应式的图片 Lightbox 插件

    ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...

  8. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  9. 13个JavaScript图表（JS图表）图形绘制插件

    转自:http://blog.jobbole.com/13671/ 1. Flash 过去是最佳解决方案,但很多人多在从那迁移: 2. 现代浏览器及其更强大的计算能力,使其在转化绘制实时数据方面的能力 ...

随机推荐

  1. 201671010142 java类与对象的定义及使用

    通过这章学习,了解到面向对象程序设计.面向对象的程序设计是有对象组成的,每个对象对用户公开的特定功能部分和隐藏的实现部分.有类构造对象的过程称为创建类的实例.实现封装的关键在于绝对不能让类中的方法直接 ...

  2. 50个常用的Linux命令（三）基础实例

    ls ls -als -l == llls -Aldrwxrwxrwx.  2 root   root       6 Dec 21 20:38 Videos-rwxrwxrwx   1 root   ...

  3. swift3笔记

    备注:这里只是个人的观点,有的地方也是copy,多多指教,个人笔记,有侵犯你们版权的地方还望海涵!!! 个人觉得swift和OC最大的区别就是增加了许多现代化的东西,java里面的闭包,private ...

  4. GeoServer java.io.IOException: No such resource: generic.sld No such resource: generic.sld

    原因是 发布 图层时 没有设置类型 默认 generic 但是我们的数据库中 没有这个 解决办法: 点击 图层--点击 相应的 图层名称 ---发布  --- WMS Settings 下面的Defa ...

  5. linux之文件增删改查

  6. 使用vector<vector<int>>实现的一个二维数组

    本文为大大维原创,最早于博客园发表,转载请注明出处!!! 1 #include<iostream> #include<vector> using namespace std; ...

  7. 20155219 mybash的实现

    第五周加分题--mybash的实现 题目要求 1.使用fork,exec,wait实现mybash 2.写出伪代码,产品代码和测试代码 3.发表知识理解,实现过程和问题解决的博客(包含代码托管链接) ...

  8. 网络编程-----IO

    IO模型介绍 阻塞IO 非阻塞 多路复用 异步 IO模型比较分析 selectors 阻塞IO:之前写的所有的socket,recv,accput都是 阻塞原理: 其实多数时间多用到了等待数据那里. ...

  9. PTA——洗牌

    PTA 7-43 Shuffling Machine #include<stdio.h> int main() { int i,n,*result; scanf("%d" ...

  10. 常见模块(二) logging模块

    logging模块是专门做日志系统的.分为函数版和自定义函数. (一)logging模块初级版 缺点,不能指定字符集,不能把屏幕输出和文件日志同时记录.只能选择其一. 文件记录日志 import lo ...