Javascript 带画布和png图像的Jquery Hittest

作为参考，我创建了一个可以通过键盘移动的div字符。 我想将hittest改为div char，而不是mouse，这样每当char命中图片中不可传输的部分时，文本命中就会变成红色。 你能帮我吗

---

我不清楚你想做什么。顺便说一句，文本hit已经变成红色。我想使用div字符作为hittest引用，而不是鼠标指针。

$(document).ready(function() {
    var $hittest = $("#hittest");

    var canvas=document.getElementById("canvas");
    var c = canvas.getContext("2d");
    var logoImg = new Image();
    var position = {
        x: 50,
        y: 50
    }

    logoImg.onload=function(){


        c.clearRect (0, 0, canvas.width, canvas.height);

        var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
        grd.addColorStop(0, "#9db7a0");
        grd.addColorStop(1, "#e6e6e6");
        c.fillStyle = grd;
        c.fillRect (0, 0, canvas.width, canvas.height);

        c.drawImage(logoImg, position.x, position.y, logoImg.width, logoImg.height); 
    }
    logoImg.src="http://dl.dropbox.com/u/139992952/car.png"; 

    $(canvas).on('mousemove', function(e) {

         var hitted = e.clientX >= position.x && e.clientX <= position.x + logoImg.width && e.clientY >= position.y && e.clientY <= position.y + logoImg.height;

        $hittest.toggleClass('red', hitted);
    });


//move div


         setInterval(moveChar, 20);
var keys = {}

$(document).keydown(function(e) {
    keys[e.keyCode] = true;
});

$(document).keyup(function(e) {
    delete keys[e.keyCode];
});


function moveChar() {

    for (var direction in keys) {
        if (!keys.hasOwnProperty(direction)) continue;
        if (direction == 37) {
            $("#char").animate({left: "-=5"}, 0);                
        }
        if (direction == 38) {
            $("#char").animate({top: "-=5"}, 0);  
        }
        if (direction == 39) {
            $("#char").animate({left: "+=5"}, 0);  
        }
        if (direction == 40) {
            $("#char").animate({top: "+=5"}, 0);  
            walk("down"); 
        }
    }
}

});