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. redis持久化RDB与AOF

    redis持久化 Redis是一种内存型数据库,一旦服务器进程退出,数据库的数据就会丢失,为了解决这个问题,Redis提供了两种持久化的方案,将内存中的数据保存到磁盘中,避免数据的丢失. RDB持久化 ...

  2. Cordova 6.5 -Android环境搭建笔记

    (Vue+Vue-cli+VueRouter+Webpack 构建单页面应用推荐看下面二个 https://lvyongbo.gitbooks.io/vue-loader/content/http:/ ...

  3. Charles抓包基本用法

    Charles抓包 浏览器发送和接受的所有请求都可以抓到 1.可以定位问题(如果看不出来是服务端问题还是前端问题) 2.可以设置弱网模式 清空请求按钮如图: 抓包: 1 打开charles,在浏览器中 ...

  4. TensorFlow Training 优化函数

    tf.train 提供了一组帮助训练模型的类和函数. 优化器 优化器基类提供了计算渐变的方法,并将渐变应用于变量.子类的集合实现了经典的优化算法,如 GradientDescent和Adagrad. ...

  5. 本地sh脚本创建以及利用ssh server远程运行sh脚本

    想要同时运行多个非本地的sh脚本,用来实现运行同一网段下多机程序的集成,可以通过在每台机器上写sh脚本,再在本机上运行一个启动远程机器sh的脚本 首先需要在所有机器上安装openssh-server ...

  6. emmet简单记录

    一.引式符号 html:5 or  ! . class #  id []标签内属性 pycharm不支持  {}标签的内容 pycharm不支持 ()分组标签  pycharm不支持 二.关系符号 1 ...

  7. Dubbo的全局Filter配置

    前言: 之前也写过dubbo的filter的文章, 后来和同事也有过交流, 才发生自己对dubbo的filter的机制, 还是存在一些误解, 尤其是自定义filter的定位, 不是那么清晰. 本文主要 ...

  8. 各机器学习方法代码（OpenCV2）

    #include <iostream> #include <math.h> #include <string> #include "cv.h" ...

  9. SQL-记录查询篇-009

    在学习记录查询之前,学习一些关键字的使用: 1.逻辑运算符:and . or . not  .is null select * from   table_name where  id>2 and ...

  10. .Net调用Java带验证的WebService解决方法

    最近遇到了一个问题,需要通过验证用户名.密码去调用对方Java给出的WebService接口. 搜索了很多资料,没想到最终很简单就完了.... (捂脸 第一步:添加web引用 第二步:进行验证,并完成 ...