jquery.eraser制作擦涂效果

jquery.eraser制作擦涂效果

<!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="width:540px;" 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>

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

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=2344

发表评论

电子邮件地址不会被公开。 必填项已用*标注