Почему canvas не работает с селектором jQuery?

Я сделал простой пример использования холста, а затем увидел, что мой код не работает, когда я использую селектор jQuery.

<сильные > Примеры:

Javascript

    window.onload = function() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.fillRect(10,50,100,200);
    };

JQuery

   window.onload = function() {
        var canvas = $('#myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.fillRect(10,50,100,200);
    };

Поэтому я понятия не имею, почему это произошло. Есть ли какие-то ограничения?

Ответы

Ответ 1

Проверьте эту обновленную версию скрипта jQuery: http://jsfiddle.net/techfoobar/46VKa/3/

Проблема заключалась в следующем:

var canvas = $('#myCanvas') получает вам расширенный объект jQuery, а не собственный объект элемента DOM, который имеет функции-члены, такие как getContext и т.д. Для этого вам нужно получить элемент canvas с помощью var canvas = $('#myCanvas')[0]

ПРИМЕЧАНИЕ: var canvas = document.getElementById('myCanvas'); эквивалентно var canvas = $('#myCanvas')[0]

Ответ 2

window.onload = function() {
     var canvas = $('#myCanvas');
     var ctx = canvas[0].getContext('2d'); // not canvas.getContext('2d')

     ctx.fillRect(10,50,100,200);
};

в вашем коде, который вы используете canvas.getContext('2d');, но он должен быть canvas[0].getContext('2d');.

Поскольку getContext('2d') работает с элементом DOM, где var canvas = $('#myCanvas'); возвращает jQuery object, но node элемент DOM.

Чтобы извлечь элемент DOM (здесь, элемент canvas) из объекта jQuery, вам нужно использовать canvas[0].

В вашем JavaScript-коде вы используете:

document.getElementById('myCanvas');, который возвращает элемент DOM. Таким образом,

var canvas = $('#myCanvas');

canvas[0] и document.getElementById('myCanvas'); совпадают.

Вы также можете изменить код jQuery следующим образом:

 window.onload = function() {
     var canvas = $('#myCanvas')[0]; // get the element here
     var ctx = canvas.getContext('2d');

     ctx.fillRect(10,50,100,200);
};

Ответ 3

Этот код...

var canvas = $('#myCanvas');
var ctx = canvas.getContext('2d');

Нужно быть...

var canvas = $('#myCanvas');
var ctx = canvas[0].getContext('2d');

Ответ 4

Вы можете использовать функцию get jquery для извлечения элемента canvas.

var canvas = $('#myCanvas').get(0).getContext('2d');