Schauen wir uns zuerst eine normale Leinwand an, die Grammatik zeichnet:
ctx.arc (Centerx, Zentrum, Radius, 0, pi*2, true);
ctx.shadowcolor = 'rgba (0,0,0,0,5)';
ctx.shadowblur = "10";
ctx.fill ();
ctx.beginPath ();
ctx.shadowcolor = 'rgba (0,0,0,0)';
ctx.moveto (Centerx-radius, Centery);
ctx.lineto (Centerx -radius, Centery - 50);
ctx.lineto (Centerx+Radius, Zentrum - 50);
ctx.lineto (Centerx+Radius, Zentrum);
// ctx.lineto (Centerx-radius, Centery);
ctx.fill ();
ctx.beginPath ();
Ctx.FillStyle = 'RGBA (255,0,0,1)';
ctx.arc (CenterX, Centery-50, Radius, 0, pi*2, true);
ctx.fill ();
Es gibt zwei Dinge, die ich mit der nativen Syntax von Leinwand nicht zufrieden bin: 1. Jeder Satz hat CTX (d. H. Das Kontext -Objekt von Leinwand) geschrieben, und 2. Jede Funktion oder Eigenschaft muss eine Linie einnehmen, der Raum verschwendet.
Ich habe viel Wertschätzung für die Kettensyntax von JQuery, wie zum Beispiel:
$ ('#div1'). show (300) .html (p) .delay (3000) .lideup (300) .remove ();
Daher möchte ich diese Syntax auch verwenden, um die Zeichnung von Canvas durchzuführen:
ctx.moveto (500,0) .lineto (500.500) .strokestyle ('#f00'). STROKE ();
Es gibt eine Möglichkeit, ein Kontext2D -Objekt zu simulieren. Dieses Objekt unterstützt alle nativen Kontext2d -Methoden, unterstützt aber auch gekettete Methoden.
Es kann jedoch nicht zu viel Code geben, da es niemanden mehr geben wird, den er gerne benutzt.
Das Folgende ist das vollständige Codesegment. Ich habe diese Klasse Xtendcanvas genannt (sie beginnt wieder mit X):
// Lassen Sie die Canvas -Kettensyntax aus zehn Jahren Licht unterstützen
~function () {var pro = ['save','restore', 'scale', 'rotate', 'translate', 'transform', 'createLinearGradient', 'createRadialGradient', 'getLineDash', 'clearRect', 'fillRect', 'beginPath', 'closePath', 'moveTo', 'lineTo', 'lineTo', 'quadraticCurveTo', 'bezierCurveTo', 'arcTo', 'rect', 'arc', 'fill', 'stroke', 'clip', 'isPointInPath', 'measureText', 'clearShadow', 'fillText', 'strokeText', 'strokeRect', 'drawImage', 'drawImageFromRect', 'putImageData', 'createPattern', 'createImageData', 'getImagedata', 'linewidth', 'strokestyle', 'globalalpha', 'fillstyle', 'font', 'Shadowoffsetx', 'Shadowoffsety', 'Shadowblur', 'ShadowColor', 'Linescap', 'Linejin', Miterlimit '];
Funktion Xtendcanvas (Canvas) {
var ctx = canvas.getContext ('2d'),
fn = function () {},
fnp = fn.prototype;
für (var j = 0, p = pro [0]; p; p = pro [j ++]) {
fn.prototype [p] = function (p) {
return function () {
var args = array.prototype.slice.call (Argumente);
// console.log (args);
if (typeof ctx [p] == 'Funktion') {
CTX [P] .Apply (CTX, Args);
} anders {
ctx [p] = args+'';
}
FNP zurückgeben;
};
}(P);
}
Neue FN zurückgeben;
};
window.xtendcanvas = xtendcanvas;
} ();
Die Verwendungsmethode ist sehr einfach. Übergeben Sie es ein Canvas -Objekt und es gibt ein ähnliches Objekt wie Context2D zurück. Sie können es wie gewöhnlicher Kontext2D verwenden, aber der Unterschied besteht darin, dass es die Kettensyntax unterstützt:
var cvs = document.getElementById ('CVS');
var ctx = xtendcanvas (CVS);
ctx.moveto (500,0) .lineto (500.500) .strokestyle ('#f00'). STROKE ();
Auf diese Weise können Sie alle Operationen in einen Satz einfügen und jederzeit unterbrechen, andere Dinge tun und dann weitermachen.
Dieser Code ist keine Verbesserung der Leinwand, sondern unterstützt einfach die Kettensyntax. Der Vorteil ist jedoch, dass es wenig Code gibt und er kann in jede JS -Bibliothek eingebettet werden. Ich hoffe, hier eine Empfehlung von Ihnen zu bekommen
Es gibt definitiv etwas, das es wert ist, den Code zu verbessern, und jeder kann ihn selbst verbessern. Aber - ich vergesse nicht, Brunnen zu graben, wenn ich Wasser zeichne. Ich hoffe, jeder erinnert sich an mich. Das Wichtigste ist die Idee, oder? Hier ist die Idee:
Wie Sie sehen können, ist der längste Teil des Codes der Array Pro, der den Methodennamen speichert, und der Kerncode ist tatsächlich sehr kurz. Warum möchte ich ein solches Array bauen?
Ursprünglich wollte ich auch alle nativen Methoden direkt von CanvasrenderingContext2D erben, aber jeder Browser durchquerte den CanvasrenderingContext2D, und die Ergebnisse waren inkonsistent. Wenn ich sie direkt erben, wird ein Fehler gemeldet, wenn Sie die Methode in Chrome verwenden möchten, um sie auszuführen.
Daher habe ich gerade die gemeinsamen, unobjektiven Methoden und Attributnamen in CanvasrenderingContext2D extrahiert. Es gibt keine Möglichkeit, ich kann nur ein festes Array erstellen - jeder kann sich entscheiden, Ihre Methode hinzuzufügen.
Die Methoden und Attribute werden extrahiert und dann werden die nativen Methoden meinem neuen Objekt hinzugefügt. Ich habe eine leere Funktion namens FN erstellt und meine Methode platziert.
Da diese Elemente im Array sowohl Funktionen als auch Attribute haben, habe ich in der Schleife beurteilt, ob es sich um eine Funktion handelt. Wenn es sich um eine Funktion handelt, wird sie mit Parametern ausgeführt. Wenn es sich nicht um eine Funktion handelt, muss es sich um eine Eigenschaft handeln, daher weise ich diese Eigenschaft die Parameter zu.
Auf diese Weise müssen Sie den Link nicht unterbrechen.
ctx.strokestyle ('#f00')
Schließlich ist der Schlüssel, Fn zurückzugeben. Dieser Trick wurde von JQuery gelernt und ist der Schlüssel zur Unterstützung der Kettensyntax.
In diesem Absatz werden anonyme Funktionen, Schließungen, Prototypen und das Seltsame für Loops verwendet, über die ich in früheren Artikeln gesprochen habe.
Es scheint ganz einfach zu sagen, aber ich habe lange darüber nachgedacht, in der Hoffnung, dass es für alle nützlich sein wird.
Während des Schreibens des Codes stellte ich fest, dass Chrome sehr gut geht. Es verfügt über eine Reihe von Funktionen, die mit SET beginnen, z. Durch die Übergabe von Parametern an sie kann es die entsprechenden Attribute wie Strokestyle und Linecap ersetzen. Mit anderen Worten, seine Leinwand ist voller Funktionen und ohne Attribute, daher muss ich nicht beurteilen, ob es sich um eine Funktion oder ein Attribut handelt. Aber in Firefox gibt es so etwas, sodass ich nur die vorherigen Ideen verwenden kann.
Ich werde auch diese Reihe von Set -Funktionen herausbringen :var bak = ['settransform', 'setalpha', 'setCompositeOperation', 'setLinewidth', 'setLinecap', 'setLinejoin', 'setMenterLimit', 'setLinedash', 'setStHadow', 'setStrokecolor', 'setfillcolor'];
Sie können ihre Verwendung auf einen Blick verstehen. Sie können auch einige Pro -Arrays auswählen, die dem vorherigen Code hinzugefügt wurden.
Schließlich frage ich mich, warum mein Code nicht hervorgehoben wird. . . Wenn Sie das Ende sehen, geben Sie mir eine Empfehlung und lassen Sie mich vergeblich sein.