zoukankan      html  css  js  c++  java
  • jquery.eraser制作擦涂效果

    jquery.eraser制作擦涂效果

    <pre>
    <!DOCTYPE html>
    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <title>
    canvas画图
    </title>
    </head>

    <body>
    <img id="redux" style="60%;" src="http://www.w3school.com.cn/i/ct_html5_canvas_image.gif" />
    <script type="text/javascript" src="/moban/js/jquery.min.js"></script>
    <script type="text/javascript" src="/moban/js/jquery.eraser.js"></script>
    <script type="text/javascript">
    $(function() {
    $('#redux').eraser({
    completeRatio: .6,
    size: 20,
    completeFunction: showResetButton
    });
    })
    function showResetButton(){
    alert('刮完');
    }
    </script>
    </body>

    </html>
    </pre>


    ps:jquery.eraser.js源码我修改了 ctx.drawImage( this, 0, 0,width,height ); 这样就能自适应了 所以图片必须设置宽度

    ps:这个刮刮卡fadeIn以后再触发代码 不然识别不到

    可以用于刮刮卡

  • 相关阅读:
    分组声明
    描述项目的典型用户与场景
    用户调研
    10-11-12
    Sprint--5.21
    Cosplay之孩子的妈咪
    作业5.1之5.2
    51nod 1393 1393 0和1相等串
    51nod 1090 3个数和为0(排序+二分)
    51nod 1095 Anigram单词(map的使用)
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11856345.html
Copyright © 2011-2022 走看看