Warum Canvas funktioniert nicht mit jQuery Selector?

Habe ich einfaches Beispiel für die Verwendung von Leinwand, und dann sah ich, dass mein code nicht funktioniert, wenn ich die jQuery-Selektor.

Beispiele:

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);
    };

Also ich habe keine Ahnung, warum es passiert ist. Gibt es irgendwelche Einschränkungen, über es?

InformationsquelleAutor der Frage Mateusz Rogulski | 2012-07-20

  1. 35

    Überprüfen Sie diese aktualisierte version der jQuery-fiddle: http://jsfiddle.net/techfoobar/46VKa/3/

    War das problem:

    var canvas = $('#myCanvas') bekommt man eine jQuery Ausgedehntes Objekt und nicht um eine native DOM-element-Objekt, das über member-Funktionen wie getContext etc. Für diese, die Sie brauchen, um das canvas-element mit var canvas = $('#myCanvas')[0]

    HINWEIS: var canvas = document.getElementById('myCanvas'); entspricht var canvas = $('#myCanvas')[0]

    InformationsquelleAutor der Antwort techfoobar

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

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

    in Ihrem code, die Sie verwenden canvas.getContext('2d'); sollte, aber es canvas[0].getContext('2d');.

    Weil getContext('2d') funktioniert auf DOM-elementwo var canvas = $('#myCanvas'); Gegenzug eine jQuery object aber Knoten a DOM-element.

    Und zum abrufen einer DOM-element (hier canvas-element) von jQuery-Objekt, das Sie verwenden müssen canvas[0].

    In der Sie JavaScript-code, die Sie verwenden:

    document.getElementById('myCanvas'); gibt ein DOM-element. So,

    var canvas = $('#myCanvas');

    canvas[0] und document.getElementById('myCanvas'); gleich sind.

    Sie können auch ändern Sie die jQuery-code, wie:

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

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

    InformationsquelleAutor der Antwort thecodeparadox

  3. 0

    Dieser code...

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

    Muss...

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

    InformationsquelleAutor der Antwort alex

  4. 0

    Verwenden Sie get-Funktion von jquery abzurufen canvas-element.

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

    InformationsquelleAutor der Antwort Dev

Schreibe einen Kommentar