Элемент холста: изображение кликнуло - PullRequest
Новая
       11

Элемент холста: изображение кликнуло

0 голосов
/ 02 декабря 2010

Я хочу знать, нажал ли пользователь на изображение, нарисованное на холсте. Я нажимаю на изображение, но ничего не происходит. Предупреждение не вызывается. Последнее условие if никогда не пройдет. Есть идеи? 

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="wrapper">
            <canvas id="game" height="500" width="700">
            </canvas>
        </div>
        <script>
        (function() {
            var canvas = document.getElementById('game'),
                context = canvas.getContext('2d'),
                fps = 1,
                character = Image(),
                positions = [[125, 55], [480, 55], [125, 185], [480, 182], [125, 315], [480, 315]],
                random, x, y, xc, yc = null;

            canvas.addEventListener('click', function(event) {
                xc = event.screenX - canvas.offsetLeft;
                yc = event.screenY - canvas.offsetTop;

                if((xc >= x) && (xc <= (x + character.width)) && (yc >= y) && (yc <= (y + character.height))) {
                    alert('X = ' + x + 'Y = ' + y);
                }
            }, true);

            character.src = 'character.png';

            setInterval(function() {
                random = (Math.floor(Math.random() * 6));

                random = positions[random];
                x = random[0];
                y = random[1];

                context.clearRect(0, 0, canvas.width, canvas.height);
                context.drawImage(character, x, y);
            }, 1000 / fps);
        }());
        </script>
    </body>
</html>

1 Ответ

2 голосов
/ 02 декабря 2010

Две проблемы здесь.

Во-первых, ваш код события не работает screenX возвращает положение мыши относительно экрана , вам нужно использовать clientX или в IE pageX см. quirksmode для больше информации. 

canvas.addEventListener('click', function(event) {
    event = event || window.event; // IE does not pass the event param!

    // you should use var infront of these local variables
    // otherwise you leak them into the global namespace
    // and you can even overwrite things there if you don't watch out
    var xc = (event.clientX ? event.clientX : pageX) - canvas.offsetLeft;
    var yc = (event.clientY ? event.clientY : pageY) - canvas.offsetTop;

Во-вторых, код никогда не запускается в Chrome! Ошибка в Uncaught TypeError: DOM object constructor cannot be called as a function. в строке 15. Вам необходимо использовать ключевое слово new при создании изображения, так как иначе не гарантируется, что Image() вернет новый экземпляр. 

...
context = canvas.getContext('2d'),
fps = 1,
character = new Image(),
...
...