javascript - HTML Canvas Scratcher，当图像的百分比被划伤时显示一个 div

Question

我正在使用我发现的这个脚本来实现刮刮卡类型的效果(来自 http://beej.us/blog/data/html-canvas-scratcher-2/)。我需要添加什么代码，以便在图像的一定百分比(比如 70%)被“刮掉”后显示隐藏的 div。谢谢。

**
 * 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...

    };

编辑**

重置 FYI 时，您还需要将类设置回隐藏。