Regardons d'abord une grammaire de dessin en toile normale:
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 ();
Il y a deux choses que je ne suis pas satisfait de la syntaxe native de toile: 1. Chaque phrase a écrit CTX (c'est-à-dire l'objet contextuel2d de toile), et 2. Chaque fonction ou propriété doit occuper une ligne, gaspillant de l'espace.
J'ai beaucoup d'appréciation pour la syntaxe de la chaîne de JQuery, comme:
$ ('# div1'). show (300) .html (p) .delay (3000) .slideUp (300) .Remove ();
Donc, je veux également utiliser cette syntaxe pour faire du dessin en toile:
ctx.moveto (500,0) .lineto (500 500) .strokestyle ('# f00'). Stroke ();
Il existe un moyen de simuler un objet contextuel2d. Cet objet prend en charge toutes les méthodes de contexte 2D natives, mais prend également en charge les méthodes chaînées.
Cependant, il ne peut pas y avoir trop de code, car il n'y aura plus que personne n'aime l'utiliser.
Ce qui suit est le segment de code complet. J'ai nommé cette classe XtendCanvas (il recommence avec x):
// Laissez la syntaxe de la chaîne de support en toile, à partir de dix ans de lumière
~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', 'meesuretsext', 'clearshadow', 'filltex '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;
pour (var j = 0, p = pro [0]; p; p = pro [j ++]) {
fn.prototype [p] = fonction (p) {
return function () {
var args = array.prototype.slice.call (arguments);
// console.log (args);
if (typeof ctx [p] == 'fonction') {
ctx [p] .Apply (ctx, args);
} autre {
ctx [p] = args + '';
}
retour fnp;
};
} (p);
}
retourner le nouveau FN;
};
window.xtendCanvas = xtendCanvas;
} ();
La méthode d'utilisation est très simple. Passez-le un objet Canvas et il renverra un objet similaire à Context2d. Vous pouvez l'utiliser comme un contexte ordinaire2d, mais la différence est qu'il prend en charge la syntaxe de la chaîne:
var cvs = document.getElementById ('cvs');
var ctx = xtendCanvas (cvs);
ctx.moveto (500,0) .lineto (500 500) .strokestyle ('# f00'). Stroke ();
De cette façon, vous pouvez mettre toutes les opérations dans une phrase, et vous pouvez interrompre à tout moment, faire d'autres choses, puis continuer.
Ce code n'est pas une amélioration de Canvas, il prend simplement en charge la syntaxe de la chaîne. Mais l'avantage est qu'il y a peu de code et qu'il peut être intégré dans n'importe quelle bibliothèque JS. J'espère obtenir une recommandation de votre part ici
Il y a certainement quelque chose qui mérite d'être amélioré dans le code, et tout le monde peut l'améliorer par lui-même. Mais - je n'oublie pas de creuser des puits lorsque je dessine de l'eau. J'espère que tout le monde se souvient de moi. La chose la plus importante est l'idée, non? Voici l'idée:
Comme vous pouvez le voir, la partie la plus longue du code est le TRAY Pro qui enregistre le nom de la méthode, et le code central est en fait très court. Pourquoi est-ce que je veux construire un tel tableau?
À l'origine, je voulais également hériter de toutes les méthodes natives directement à partir de CanvasRenderingContext2D, mais chaque navigateur a traversé le CanvasRenderingContext2d, et les résultats étaient incohérents. Si je les hérite directement, alors lorsque vous souhaitez utiliser la méthode de Chrome pour l'exécuter, une erreur sera signalée.
Je viens donc d'extraire les méthodes et les noms d'attribut communs et d'attribut dans CanvasRenderingContext2d. Il n'y a aucun moyen, je ne peux que créer un tableau fixe - tout le monde peut décider d'y ajouter votre méthode.
Les méthodes et les attributs sont extraits, puis les méthodes natives sont ajoutées à mon nouvel objet. J'ai construit une fonction vide appelée FN et placé ma méthode.
Étant donné que ces éléments dans le tableau ont à la fois des fonctions et des attributs, j'ai jugé dans la boucle s'il s'agit d'une fonction. S'il s'agit d'une fonction, il sera exécuté avec des paramètres; S'il ne s'agit pas d'une fonction - alors il doit s'agir d'une propriété, donc j'attribue les paramètres à cette propriété.
De cette façon, lorsque vous rencontrez la définition de l'attribut Canvas, vous n'avez pas besoin d'interrompre le lien, il suffit de passer la valeur d'attribut en tant que paramètre, par exemple:
ctx.strokestyle ('# f00')
Enfin, la clé est de retourner fn. Cette astuce a été apprise de jQuery et est la clé de la syntaxe de la chaîne de support.
Ce paragraphe utilise des fonctions anonymes, des fermetures, des prototypes et des boucles étranges pour les boucles dans les articles précédents.
Cela semble assez simple à dire, mais j'y réfléchis depuis longtemps, en espérant que cela sera utile à tout le monde.
Pendant le processus d'écriture de code, j'ai trouvé que Chrome se porte très bien. Il a une chaîne de fonctions commençant par SET, telles que SetStrokeColor, SetLineCap et d'autres fonctions. En leur transmettant des paramètres, il peut remplacer les attributs correspondants tels que StrokeSet et LineCap. En d'autres termes, sa toile est pleine de fonctions et pas d'attributs, donc je n'ai pas à juger s'il s'agit d'une fonction ou d'un attribut. Mais il n'y a rien de tel dans Firefox, donc je ne peux utiliser que les idées précédentes.
Je vais également éteindre cette chaîne de fonctions définies :var bak = ['setTransform', 'setalpha', 'setCompositeOperation', 'setlinewidth', 'setlinecap', 'setLineJoin', 'setmiterlimit', 'setlinned', 'setshadow', 'setStrokeColor', 'setLenedash'];
Ils peuvent comprendre leurs utilisations en un coup d'œil. Vous pouvez également sélectionner certains tableaux professionnels ajoutés au code précédent.
Enfin, je me demande pourquoi mon code n'est pas mis en évidence. . . Si vous voyez la fin, alors donnez-moi une recommandation et laissez-moi être vain.