Блог

Главная - Вопросы по программированию - Невозможно преобразовать код Javascript в jQuery

Невозможно преобразовать код Javascript в jQuery

#javascript #jquery #html #html5-canvas

#javascript #jquery #HTML #html5-canvas

Вопрос:

Как и некоторые новички, я пытался изучить jQuery, преобразуя код javascript в jquery. Теперь вот часть кода, которая использует HTML Canvas и позволяет пользователю рисовать и удалять содержимое в Canvas с помощью Jquery:

 function init() {
canvas = $('#can');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;

canvas.addEventListener("mousemove", function (e) {
    findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
    findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
    findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
    findxy('out', e)
}, false);}

Этот код изначально был на Javascript, я только что изменил селекторы, чтобы использовать его как Jquery. Но я получаю ошибку, как в 3-й строке этого кода, как:
Ошибка неперехваченного типа: неопределенный не является функцией

Не могли бы вы объяснить, почему я это получаю. Спасибо

Комментарии:

1. Вы используете функцию элемента DOM для объекта jQuery. Это не очень хорошая ситуация для преобразования Javascript в jQuery…

2. Почему бы не преобразовать и остальные -> jsfiddle.net/5uazu

Ответ №1:

getContext не является свойством jQuery, поэтому вам необходимо получить доступ к базовому элементу DOM и вызвать его для этого:

 ctx = canvas[0].getContext("2d");

Кроме того, соглашение jQuery заключается в использовании $ префикса для переменной, содержащей объект jQuery. width и height также являются методами, поэтому должны иметь завершающие скобки. Наконец, если вы хотите использовать jQuery, используйте его и для прикрепления ваших событий:

 function init() {
    var $canvas = $('#can');
    var ctx = $canvas[0].getContext("2d");
    var w = $canvas.width();
    var h = $canvas.height();

    $canvas
        .on("mousemove", function(e) { findxy('move', e); })
        .on("mousedown", function(e) { findxy('down', e); })
        .on("mouseup", function(e) { findxy('up', e); })
        .on("mouseout", function(e) { findxy('out', e); });
}

Комментарии:

1. Спасибо. Таким образом, это сработало. Также можете ли вы сказать мне, если что-то не так с приведенным ниже, оно как-то не работает: функция erase() { ctx.clearRect(0, 0, w, h); $(‘#canvasimg’).style.display = «none»; }

2. ctx объявлен внутри вашей init() функции, поэтому не будет доступен из erase() . Вам также нужно либо создать ctx в этой функции, либо сделать ее доступной в рамках обеих функций.

3. Я сделал его глобальным. Но, к сожалению, я вызвал несуществующий метод при отладке основной проблемы. Исправлено сейчас. Спасибо за помощь. Теперь код работает просто отлично.

4. @ak0053792 рад помочь 🙂

Ответ №2:

Попробуйте использовать canvas = $('#can')[0];

Ответ №3:

Это связано с тем, что любые селекторы jQuery будут возвращать объект jQuery, а не экземпляр элемента JS. Если селектор возвращает только 1 элемент, он всегда находится в 0 индексе возвращаемого объекта:

 canvas = $('#can')[0];
ctx = canvas.getContext("2d");
Метки: