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. Cordova 6.5 -Android环境搭建笔记

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

  2. css图形——三角形

    1.css图形简介 在浏览网页的时候,我们经常看见各种图形的效果,而但凡涉及到图形效果,我们第一个想到的就是用图片来实现.但是在前端开发中,为了网站的性能速度,我们都是秉承着少用图片的原生质. 因为图 ...

  3. 使用mybatis generator插件，自动生成dao、dto、mapper等文件

    mybatis generator 介绍 mybatis generator中文文档http://mbg.cndocs.tk/ MyBatis Generator (MBG) 是一个Mybatis的代 ...

  4. jQuery开发API参考

    http://jquery.cuishifeng.cn/show.html (原地址)

  5. WCF分布式服务2-服务配置部署

    上图整理了服务配置过程中所用到的基本的元素,大致的步骤: 1. 主要是首先要在调用服务的程序集中添加服务的一个引用. 2.  然后添加一个service并指定服务的名称.终结点. 在添加一个servi ...

  6. 解决ubuntu下firefox的flash全屏后不能恢复问题 ZT

    sudo mkdir /etc/adobe echo "OverrideGPUValidation=true" >~/mms.cfg sudo mv ~/mms.cfg /e ...

  7. L2-020. 功夫传人*

    L2-020. 功夫传人 参考博客 #include<vector> #include<cstring> #include<algorithm> using nam ...

  8. C#泛型中的抗变和协变

    在.net4之前,泛型接口是不变的..net4通过协变和抗变为泛型接口和泛型委托添加了一个重要的拓展 1.抗变:如果泛型类型用out关键字标注,泛型接口就是协变的.这也意味着返回类型只能是T. 实例: ...

  9. Python:从入门到实践--第十章--文件和异常--练习

    #.python学习笔记:在文本编辑器中新创建一个文件,写几句话老总结你至此学到的python知识 #其中‘In Python you can’ 打头.将这个文件命名为learning_python. ...

  10. python------面向对象进阶 Socket网络编程

    一.Socket网络编程 1.七层模型,亦称OSI(Open System Interconnection)参考模型,是参考模型是国际标准化组织(ISO)制定的一个用于计算机或通信系统间互联的标准体系 ...