Scratch.js 兼容手机端的刮刮卡插件-BFW插件库

Scratch.js 兼容手机端的刮刮卡插件

第一步引入bfwone

第二步执行插件代码

该Canvas刮刮卡插件的可用配置参数有：
canvasId：canvas的id。
imageBackground：背景图片（刮开后呈现的图片）。
pictureOver：前景图片。
sceneWidth：canvas的宽度。
sceneHeight：canvas的高度。
radius：清除区域的半径。
nPoints：清除区域的杂点数量。
percent：在清除多少区域之后清空canvas。
cursor：光标。
png：png格式的光标。
x：Move position x。
y：Move position y。
cur：cur格式的光标（IE使用）。

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["Scratch"], function() {

                var scratch = new Scratch({
                    canvasId: 'js-scratch-canvas',
                    imageBackground: '/bfwrepo/image/guaguaka/win.jpg',
                    pictureOver: '/bfwrepo/image/guaguaka/foreground.jpg',
                    cursor: {
                        png: '/bfwrepo/image/guaguaka/piece.png',
                        x: '20',
                        y: '17'
                    },
                    radius: 20,
                    nPoints: 100,
                    percent: 50,
                    callback: function () {
                        alert('I am Callback.');
                    },
                    pointSize: {
                        x: 3, y: 3
                    }
                });


            });
        });
    </script>
    <style>
        body {
            padding: 0;
            margin: 0;
            font-family: microsoft yahei,segoe ui,lucida grande,Helvetica,Arial,sans-serif;
            background-color: #e7e7e7
        }

        .text-intro {
            position: relative;
            margin: 0 auto 50px;
            text-align: center;
            max-width: 600px
        }

        .max-width {
            position: relative;
            margin: 0 auto;
            max-width: 600px
        }

        .code {
            background-color: #e5e5e5;
            border-radius: 10px
        }

        .scratch_container {
            position: relative;
            margin: 0 auto;
            max-width: 1024px
        }

        .scratch_viewport {
            position: relative;
            max-width: 250px;
            max-height: 250px;
            margin: 0 auto;
            z-index: 0
        }

        .scratch_picture-under {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            display: block;
            z-index: -1
        }

        .scratch_container canvas {
            position: relative;
            width: 100%;
            height: auto;
            z-index: 1
        }
    </style>
</head>
<body>
    <div class="max-width">
        <p>
            在这个例子中，当你刮开50%的面积时，回调函数就会被执行。
        </p>
        <div class="scratch_container">
            <div class="scratch_viewport">
                <canvas id="js-scratch-canvas"></canvas>
            </div>
        </div>
    </div>
</body>
</html>

Scratch.js 兼容手机端的刮刮卡插件

网友评论0

vconsole.js

ntc.js

classie.js

jquery.wheelOfFortune.js

guagua.js

qrcode.js

tracking-min.js

Scratch.js

crossroads.js

jscapture.js