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. 分数化小数(decimal)

    分数化小数 ①我的程序 #include<iostream>using namespace std;int main(void){ int a,b,c,kase=0; while(scan ...

  2. scikit-learn实现简单的决策树

    #encoding=utf-8import numpy as npimport pandas as pd def main(): #Pre-processing from sklearn.datase ...

  3. 使用GraphHttpClient调用Microsoft Graph接口 - POST

    博客地址:http://blog.csdn.net/FoxDave 本篇接上一讲,我们继续看如何通过GraphHttpClient创建一个Office 365的组,需要使用POST请求. 为结果添加按 ...

  4. Mac 下配置Lua环境

    1.下载LUA源码包 curl -R -O http://www.lua.org/ftp/lua-5.3.1.tar.gz 2.解压并进入目录 tar -xvf lua-.tar.gz cd lua- ...

  5. oracle 11g安装过程

    1,工具:Oracle_win64_11gR2_database(64位oracle 11g数据库).iso安装文件,win10系统 2,右键,解压后,点击setup.exe,系统会检测本机的环境,如 ...

  6. scrapy中crawlspide中callback和follow函数的作用及使用方法

    Rule(LinkExtractor(allow=r'i/tems'),callback='parse_item',follow=True)  当前代码的含义就是将当前页面及按照allow=r'i/t ...

  7. windows2008 转 centos7 数据磁盘NTFS无损挂载

    转换时 原win硬盘里作为系统稳盘的硬盘必须重新格式化才能装机 数据盘在安装ntfs-3g可以直接挂载 几个重要命令: #lsblk  //查看硬盘情况 df -T 只可以查看已经挂载的分区和文件系统 ...

  8. 剑指Offer 47. 求1+2+3+...+n （其他）

    题目描述 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 题目地址 https://www.nowcod ...

  9. 神州数码静态路由及直连网段引入到RIP协议配置（路由重定向）

    实验要求:掌握静态路由及直连网段引入协议当中的配置 拓扑如下 R1 enable 进入特权模式 config 进入全局模式 hostname R1 修改名称 interface g0/6 进入端口 i ...

  10. MVVM设计模式加RAC响应式编程

    一:为什么要用MVVM? 为什么要用MVVM?只是因为它不会让我时常懵逼. 每次做完项目过后,都会被自己庞大的ViewController代码吓坏,不管是什么网络请求.networking data ...