javascript - 鼠标悬停时的绘画效果 (JQuery)

Question

我正在查看 this example .

我想知道是否可以跟踪鼠标光标，以便一旦您将鼠标悬停在图像的一部分上它就会保持颜色？有点像您正在绘画或着色。是否有我应该寻找的特定插件，或者我该如何实现？

Answer 1

这是 jQuery:

/*
 * jQuery + Canvas Scratch Off
 * @author admin@catchmyfame.com - http://www.catchmyfame.com
 * @version 1.0
 * @date June 28, 2011
 * @copyright (c) 2011 admin@catchmyfame.com (www.catchmyfame.com)
 * @license CC Attribution-NoDerivs 3.0 Unported - http://creativecommons.org/licenses/by-nc-sa/3.0/
 */
var topImage = new Image();
var bottomImage = new Image();
var coinImage = new Image();
bottomImage.src = "bottom-300.jpg";
coinImage.src = "circle.png";   

function init()
{
    var isMouseDown = false;
    var canvasWidth = $('#canvas').width();
    var canvasHeight = $('#canvas').height();
    $('body').append('<canvas id="overlay" width="'+canvasWidth+'" height="'+canvasHeight+'" />'); // Create the coin overlay canvas
    var overlayctx = $('canvas')[1].getContext('2d');
    overlayctx.drawImage(coinImage, 0,0);


    function scratchOff(x, y)
    {
        mainctx.save();
        mainctx.beginPath();
        mainctx.arc(x,y,radius,0,Math.PI*2,false); // we don't fill or stroke the arc intentionally
        mainctx.clip();
        mainctx.drawImage(bottomImage, 0, 0);
        mainctx.restore();
    }

    $('#overlay').mousedown(function(e){
            isMouseDown = true;
            var relX = e.pageX - this.offsetLeft;
            var relY = e.pageY - this.offsetTop;
            scratchOff(relX, relY, true);
    });
    $('#overlay').mousemove(function(e){
        var relX = e.pageX - this.offsetLeft;
        var relY = e.pageY - this.offsetTop;
        overlayctx.clearRect(0,0,canvasWidth,canvasHeight);
        overlayctx.drawImage(coinImage, relX-radius, relY-radius);
        if (isMouseDown) scratchOff(relX, relY, false);
    });
    $('#overlay').mouseup(function(e){
        isMouseDown = false;
    });

    var mainctx = $('canvas')[0].getContext('2d');
    var radius = 15;
    topImage.onload = function(){
        mainctx.drawImage(topImage, 0, 0);
    };
    topImage.src = "top-300.jpg";
}

和 HTML:

<canvas id="canvas" width="300" height="225"></canvas>