Erstellen eines Canvas-Element und Einstellung seiner Breite und Höhe Attribute mit jQuery

Question

Ich habe nur versucht, die folgenden in jQuery zu tun:

var newCanvas = $('<canvas/>',{'width':100,'height':200,'class':'radHuh'}); 
$(body).append(newCanvas); 

Dies funktioniert (Art) und erzeugt das folgende Markup:

<canvas style="width:100px; height:200px;" class="radHuh"></canvas> 

Wie die meisten von Ihnen vielleicht wissen canvas Elemente mögen CSS-Dimensionen nicht wirklich, aber erwarten ein Attribut width und height, so dass diese Objekt-Erstellung für mich fehlgeschlagen ist.

Ich weiß, ich könnte nur tun:

var newCanvas = $('<canvas/>',{'class':'radHuh'}).attr({'width':100,'height':200}); 

statt, aber ich habe mich nur gefragt dennoch, wenn es irgendeine Art und Weise ist jQuery zu sagen, dass width und height sollte als Attribute behandelt werden, wenn das Element über $('element',{attributes}) Schaffung und nicht als CSS?

Answer 1

jQuery versuchen jeweils übereinstimmen mit einem Funktionsnamen Attributnamen jQuery. Übereinstimmende Funktionen werden aufgerufen.

width und height sind jQuery-Funktionen, so dass Ihr Original-Code zu dieser entspricht:

var newCanvas = 
    $('<canvas/>',{'class':'radHuh'}) 
    .width(100) 
    .height(100); 

width(value) und height(value) Funktionen CSS Breite und Höhe eines Elements gesetzt.

---

Relevante jQuery Quellcodezeile (https://github.com/jquery/jquery/blob/master/src/attributes.js#L308)

if (pass && name in jQuery.attrFn) { 

attrFn Objektdefinition (https://github.com/jquery/jquery/blob/master/src/attributes.js#L288):

attrFn: { 
    val: true, 
    css: true, 
    html: true, 
    text: true, 
    data: true, 
    width: true, 
    height: true, 
    offset: true 
}, 

Answer 2

können Sie mögen dieses

$('<canvas/>',{'class':'radHuh','Width':100,'Height':200}); 

ändern, um den Fall und versuchen

Answer 3

var newCanvas = $('<canvas/>',{ 
        'class':'radHuh', 
        id: 'myCanvas'     
       }).prop({ 
        width: 200, 
        height: 200 
       }); 
$('#canvas').append(newCanvas); 

Proof

Answer 4

Es scheint, als würde die Änderung der Groß- und Kleinschreibung verhindern, dass jQuery das Attribut in einen Stil konvertiert. Ranganadh ist wahrscheinlich auf einen unbeabsichtigten Fehler in jQuery gestoßen, wo das Attribut auf Stile überprüft wird, aber nicht auf Groß- und Kleinschreibung.

Dies scheint zum Beispiel auch zu funktionieren ??

var newCanvas = $('<canvas/>', {heiGht: 200, widtH: 100}); 
$('body').append(newCanvas);​​​ 

die nativen JS Attribute nicht zu Stilen konvertieren, und ich würde wahrscheinlich mit der folgenden Lösung gehen, um sicherzustellen, dass es „zukunftssicher“ (setAttribute() fein als gut zu funktionieren scheint):

var newCanvas = $('<canvas/>'); 
    newCanvas[0].height = 200; 
    newCanvas[0].width = 100; 

$('body').append(newCanvas);​​​ 

Answer 5

Edit: Dies ist langsamer, siehe Kommentare unten.

Dies wird wahrscheinlich schneller als jede Abhilfe hier gepostet:

var attributes = {width: 100, height: 100, class: "whatever"}; 
$('<canvas width="'+attributes.width+'" height="'+attributes.height+'" class="'+attributes.class+'""></canvas>').appendTo(document.body); 

Etwas weniger schicker, aber es ist esentially das gleiche mit weniger Funktionsaufrufe.

Answer 6

fand ich, dass dies die beste gearbeitet:

kann

$('<canvas height="50px" width="50px"/>') 

Sie auch id, class oder andere Attribute auf diese Weise hinzufügen. Da es nicht im Attribut style="" ist, zählt es nicht als CSS und vermasselt Ihre Formen.