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. 输入、输出与Mad Libs游戏

    name1 = input('请输入一个名字:') name2 = input('再输入一个名字:') article = input('请输入一种物品:') print('{}掉进了{},{}去救她 ...

  2. 5.使用std的迭代器访问并修改图像

    void Test_ColorReduceByIterator() { Mat g_srcImage=imread("D:\\OpenCV Projects\\OpenCV_Test_Ima ...

  3. effective java——31用实例域代替序数

    1,永远不要根据枚举的序数导出与它关联的值,而是要将他保存在一个实例域中.(ordinal()) public enum Ensemble { SOLO, DUET, TRIO, QUARTET, Q ...

  4. servlet邮箱激活验证实例含代码

    也有很多人本来有机会的,他们都拒绝了,不想让自己太累,太麻烦.或者中途被情绪所左右,半途而废了. 成长是有代价的,同样悠闲也是有代价的. 流程: 用户填写相关信息,点击注册按钮 系统先将用户记录保存到 ...

  5. 有关导出Excel特殊字符的问题

    在导出Excel的时候,如果在一个单元格的最前面有一个双引号(英文状态下),这个单元格一定要将其关闭这个双引号,否则会自动向下匹配同列单元格的双引号,从而导致串行,出现错误数据

  6. 3.2 unittest执行顺序

    3.2 unittest执行顺序 前言很多初学者在使用unittest框架时候,不清楚用例的执行顺序到底是怎样的.对测试类里面的类和方法分不清楚,不知道什么时候执行,什么时候不执行.本篇通过最简单案例 ...

  7. Atom选中多行操作

    没有用过sublime,但是有选取多行的需求 我有一个文本文件,前面几行都是文件夹路径,并且都是单个字母,我想删除路径,保存纯粹的子文件夹名称,这样可以上传谷歌翻译文档,写程序再写txt略显麻烦,直接 ...

  8. 词频统计V2.5

    一.前言 作业具体要求见[https://edu.cnblogs.com/campus/nenu/SWE2017FALL/homework/922].一开始用JAVA写了个词频统计,然而没想出输入格式 ...

  9. python:基本统计值计算（平均数，方差，中位数）

    #CalStatisticsV1.py def getNum(): #获取用户不定长度的输入 nums=[] test=input("请输入要存储的数据(回车退出):") whil ...

  10. Yii2项目高级模版 三个模块在同一个目录下的重定向配置

    最近做项目用到的,非常好用. 修改 advanced/backend/config/main.PHP 文件如下: return [ 'homeUrl' => '/admin', 'compone ...