JSで実現したスクレーパプログラム

詳細
ソース:
HTML 5 Canvasベースのスクラッチ(スクラッチカード)ガジェット
HTML 5 Canvasベースのスクラッチ(スクラッチカード)ガジェット(Scratch card based on HTML 5 Canvas)
JavaScript刮賞効果(jqueryピクチャー刮賞プラグイン)(添付gj 2)
jQuery UIシミュレーション宝くじコーティング表示結果
 
コントロール以外の実装:
HTML 5によるスキージ効果
jQuery+HTML 5スクレーパー抽選特効を実現
構成可能アイテムとコールバック関数
 
lucky-cardコントロールを初期化する場合、JSONオブジェクトの入力と(または)コールバック関数の入力をサポートし、コントロール機能の構成/コールバック関数の設定に使用します.

LuckyCard.case(settings,callback);

パラメータsettingsはJSONオブジェクトであり、オプションでコントロール機能

を構成するために使用される

パラメータcallbackはコールバック関数であり、オプションでsettingsに

と書くこともできます.
設定可能項目(settings)一覧
keyタイプのデフォルト値の説明
coverColor
string
"#C5C5C5"
スクラッチ層の色は、coverImgが設定されていない場合に有効です.16進数とrgbaの書き方をサポートします.
coverImg
string
""
スクラッチレイヤは、画像アドレスを設定する画像であってもよく、これを設定するとcoverColorは無効になります.(注:ピクチャアドレスはドメイン間ではサポートされていません.ドメイン間では、先にData URIに移行することを考慮できます)
ratio
number
0.8
コールバック関数をトリガすると、刮開面積が総面積に占める割合が、この割合を超えるコールバックがトリガされます.推奨値は0～1です.
callback
function
null
コールバック関数は、刮開面積が総面積に占める割合が設定値を超えたときにトリガーされ、独立したパラメータとして存在してもよい.コールバック関数でthisを呼び出すことができます.clearCover()メソッドは、スクラッチ層のすべての画素を除去します.

//    
LuckyCard.case({coverColor:'#CCCCCC',ratio:.6,callback:function(){alert('   ！')}});

//         ，       ，             Data URI，   
LuckyCard.case({coverImg:'./demo.jpg'});

//callback            
LuckyCard.case(function(){
    //           
    this.clearCover();
});

 

    
    
    
    
    
    



    

        
￥5000000 
	
    
    LuckyCard.case({
		coverColor:'red',
        ratio: .5
    }, function() {
        alert('      ，     ！');
        this.clearCover();
    });
    

 
...

刮賞JS.zip (3 KB)

説明:JS

ダウンロード回数:1

Gua.rar (271.7 KB)

説明:これも実はJS

です

ダウンロード回数:2

gj2.zip (426.2 KB)

ダウンロード回数:1

lucky-card-master.zip (69.3 KB)

ダウンロード回数:3