HTML Canvas Scratcher，當圖像的劃傷百分比時顯示div

Question

我使用的是我爲刮刮卡效果（從http://beej.us/blog/data/html-canvas-scratcher-2/）發現的此腳本。我需要添加什麼代碼才能顯示隱藏的div，一旦圖像的某個百分比（例如70％）被「刮掉」。 謝謝。

** 
* This file controls the page logic 
* 
* depends on jQuery>=1.7 
*/ 
(function() { 

/** 
* Returns true if this browser supports canvas 
* 
* From http://diveintohtml5.info/ 
*/ 
function supportsCanvas() { 
    return !!document.createElement('canvas').getContext; 
}; 

/** 
* Handle scratch event on a scratcher 
*/ 
function scratcher1Changed(ev) { 
    // Test every pixel. Very accurate, but might be slow on large 
    // canvases on underpowered devices: 
    //var pct = (scratcher.fullAmount() * 100)|0; 

    // Only test every 32nd pixel. 32x faster, but might lead to 
    // inaccuracy: 
    var pct = (this.fullAmount(32) * 100)|0; 

    $('#scratcher1Pct').html('' + pct + '%'); 
}; 

/** 
* Reset all scratchers 
*/ 
function onResetClicked(scratchers) { 
    var i; 

    for (i = 0; i < scratchers.length; i++) { 
     scratchers[i].reset(); 
    } 

    return false; 
}; 

/** 
* Assuming canvas works here, do all initial page setup 
*/ 
function initPage() { 
    var scratcherLoadedCount = 0; 
    var scratchers = []; 
    var i, i1; 

    // called each time a scratcher loads 
    function onScratcherLoaded(ev) { 
     scratcherLoadedCount++; 

     if (scratcherLoadedCount == scratchers.length) { 
      // all scratchers loaded! 

      // bind the reset button to reset all scratchers 
      $('#resetbutton').on('click', function() { 
        onResetClicked(scratchers); 
       }); 

      // hide loading text, show instructions text 
      $('#loading-text').hide(); 
      $('#inst-text').show(); 
     } 
    }; 

    // create new scratchers 
    var scratchers = new Array(1); 

    for (i = 0; i < scratchers.length; i++) { 
     i1 = i + 1; 
     scratchers[i] = new Scratcher('scratcher' + i1); 

     // set up this listener before calling setImages(): 
     scratchers[i].addEventListener('imagesloaded', onScratcherLoaded); 
     scratchers[i].setImages('images/s' + i1 + 'bg.jpg', 
      'images/s' + i1 + 'fg.gif'); 
    } 

    // get notifications of this scratcher changing 
    // (These aren't "real" event listeners; they're implemented on top 
    // of Scratcher.) 
    scratchers[0].addEventListener('reset', scratcher1Changed); 
    scratchers[0].addEventListener('scratch', scratcher1Changed); 

    // Or if you didn't want to do it every scratch (to save CPU), you 
    // can just do it on 'scratchesended' instead of 'scratch': 
    //scratchers[2].addEventListener('scratchesended', scratcher3Changed); 
}; 

/** 
* Handle page load 
*/ 
$(function() { 
    if (supportsCanvas()) { 
     initPage(); 
    } else { 
     $('#scratcher-box').hide(); 
     $('#lamebrowser').show(); 
    } 
}); 

})(); 

Answer 1

http://jsfiddle.net/MT4nK/11/

您已經有了這樣的：

<div class="hidden" id="show">This div to appear after 40% scracthed</div> 

我將此添加到您的CSS：

.show{ 
    display:block; 
} 

這給JavaScript：

function scratcher1Changed(ev) { 
     // Test every pixel. Very accurate, but might be slow on large 
     // canvases on underpowered devices: 
     //var pct = (scratcher.fullAmount() * 100)|0; 

     // Only test every 32nd pixel. 32x faster, but might lead to 
     // inaccuracy: 
     var pct = (this.fullAmount(32) * 100) | 0; 

     $('#scratcher1Pct').html('' + pct + '%'); 
     //******************* 
     if(pct >= 40){ 
      $('#show').addClass("show") 
     } 
     //*************** Added This... 

    }; 

編輯* *

您還需要設置類回hidden當您重置僅供參考。