Durchbrechen Sie die Einschränkungen der Canvas-Syntax und unterstützen Sie die Tutorialfähigkeiten der Kettensyntax_html5

Schauen wir uns zunächst eine normale Canvas-Zeichnungssyntax an:

Kopieren Sie den Code

Der Code lautet wie folgt:

ctx.arc(centerX,centerY,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,centerY - 50);
ctx.lineTo(centerX-radius,centerY) ;
// 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();

Das bin ich nicht Ich bin mit der nativen Canvas-Syntax zufrieden. Es gibt zwei Punkte: 1. Vor jedem Satz steht ctx (das context2d-Objekt von Canvas) und 2. Jede Funktion oder jedes Attribut nimmt eine Zeile ein, was Platzverschwendung darstellt.

Ich schätze die Kettensyntax von jQuery sehr, wie zum Beispiel:

Code kopieren

Der Code lautet wie folgt :

$('#div1').show(300).html(p).delay(3000).slideUp(300).remove();

Daher möchte ich auch diese Syntax zum Zeichnen auf Leinwand verwenden:

Kopieren Sie den Code

Der Code lautet wie folgt:

ctx.moveTo(500,0).lineTo(500,500).StrokeStyle('#f00').Stroke();

Eine Möglichkeit besteht darin, a zu simulieren context2d-Objekt, dieses Objekt unterstützt alle nativen context2d-Methoden, unterstützt aber auch die Verkettung.

Allerdings darf man nicht zu viel Code haben, sonst wird ihn niemand gerne nutzen.

Das Folgende ist der vollständige Codeausschnitt. Ich habe diese „Klasse“ XtendCanvas genannt (sie beginnt wieder mit X):

Kopieren Sie den Code

Der Code lautet wie folgt:

// Lassen Sie Canvas die Kettensyntax von Ten Years Light unterstützen
~function () {var pro = ['save ','restore', 'scale', 'rotate', 'translate', 'transform', 'createLinearGradient', 'createRadialGradient', 'getLineDash', 'clearRect', 'fillRect', 'beginPath', 'closePath', 'moveTo', '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','lineCap','lineJoin','miterLimit'];
function XtendCanvas (canvas) {

var ctx = canvas.getContext('2d'),
fn = function(){},
fnP = fn.prototype;
for(var j = 0,p=pro[0] ;p;p=pro[j ]) {
fn.prototype[p] = function (p) {
return function () {
var args = Array.prototype.slice.call(arguments) ;
// console.log(args);
if(typeof ctx[p] == 'function') {
ctx[p].apply(ctx,args);
} else {
ctx[p] = args '';
}
return fnP;
};
}(p);
}
return new fn;
};
window. Es kann wie gewöhnliches context2d verwendet werden, der Unterschied besteht jedoch darin, dass es die Kettensyntax unterstützt:

Code kopieren

Code wie folgt: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 Vorgänge in einem Satz zusammenfassen und jederzeit unterbrechen, andere Dinge tun und dann fortfahren.

Dieser Code ist keine Erweiterung von Canvas, sondern ermöglicht lediglich die Unterstützung der Kettensyntax. Aber der Vorteil ist, dass es weniger Code hat und in jede JS-Bibliothek eingebettet werden kann. Hier hoffe ich, eine „Empfehlung“ von Ihnen zu bekommen

Der Code muss Bereiche enthalten, die es wert sind, verbessert zu werden, und jeder kann ihn verbessern von alleine. Aber – vergessen Sie nicht den Brunnengräber, wenn Sie Wasser trinken. Ich hoffe, dass sich jeder an mich erinnert. Das Wichtigste ist die Idee, oder? Hier ist die Idee:
Wie Sie sehen können, ist der längste Teil des Codes das Array Pro, das den Methodennamen speichert, während der Kerncode sehr kurz ist. Warum muss ich ein solches Array erstellen?

Ursprünglich wollte ich alle nativen Methoden direkt von CanvasRenderingContext2D erben, aber beim Durchlaufen dieses CanvasRenderingContext2D in jedem Browser waren die Ergebnisse inkonsistent. Wenn ich sie direkt erbe, wird ein Fehler gemeldet, wenn Sie die Methode in Chrome zum Ausführen in Firefox verwenden möchten.

Also habe ich gerade die allgemeinen, unbedenklichen Methoden und Eigenschaftsnamen in CanvasRenderingContext2D extrahiert. Es gibt keine andere Möglichkeit, als ein festes Array zu erstellen – Sie können Ihre Methoden nach eigenem Ermessen hinzufügen.

Die Methoden und Eigenschaften werden extrahiert und dann werden die nativen Methoden zu meinem neuen Objekt hinzugefügt. Ich habe eine leere Funktion namens fn erstellt, um meine Methoden zu platzieren.

Da diese Elemente im Array sowohl Funktionen als auch Attribute haben, habe ich beurteilt, ob es sich um eine Funktion in der Schleife handelt. Wenn es sich um eine Funktion handelt, wird sie mit Parametern ausgeführt Es muss ein Attribut sein. Weisen Sie den Parameter diesem Attribut zu.

Auf diese Weise müssen Sie beim Festlegen des Canvas-Attributs die Kette nicht unterbrechen. Sie können den Attributwert einfach direkt als Parameter übergeben, zum Beispiel:

Code kopieren

Der Code lautet wie folgt:

ctx.StrokeStyle('#f00')

Schließlich der Schlüssel, der fn zurückgibt. Dieser Trick wurde von jQuery gelernt und ist der Schlüssel zur Unterstützung der Kettensyntax.

Anonyme Funktionen, Abschlüsse, Prototypen und die seltsame for-Schleife, über die ich in früheren Artikeln gesprochen habe, werden in diesem Absatz verwendet.

Es scheint ganz einfach zu sagen, aber ich habe wirklich lange darüber nachgedacht und hoffe, dass es für alle nützlich sein wird.

Beim Schreiben von Code habe ich festgestellt, dass Chrome eine Reihe von Funktionen hat, die mit set beginnen, wie z. B. setStrokeColor, setLineCap und andere Funktionen Ersetzen Sie die entsprechenden StrokeStyle- und LineCap-Attribute, das heißt, seine Leinwand ist voller Funktionen und ohne Attribute. In diesem Fall muss ich nicht beurteilen, ob es sich um eine Funktion oder ein Attribut handelt. Aber in Firefox gibt es so etwas nicht, daher kann ich nur die vorherige Idee verwenden.

Lassen Sie mich auch die eingestellte Funktion freigeben:

Code kopieren

Die Der Code lautet wie folgt:

var bak = ['setTransform','setAlpha', 'setCompositeOperation', 'setLineWidth', 'setLineCap', 'setLineJoin', 'setMiterLimit', 'setLineDash ', 'setShadow','setStrokeColor','setFillColor'];

Ihre Verwendung ist auf einen Blick leicht zu verstehen. Sie können auch einige auswählen, um sie dem Pro-Array im vorherigen Code hinzuzufügen.

Abschließend frage ich mich, warum mein Code nicht hervorgehoben ist. . . Wenn Sie es bis zum Ende gesehen haben, können Sie mir auch eine Empfehlung geben, damit auch ich eitel sein kann.