Brisez les limites de la syntaxe du canevas et laissez-la prendre en charge les compétences du didacticiel syntax_html5 en chaîne

Examinons d'abord une syntaxe normale de dessin sur toile :

Copiez le code

Le code est le suivant :

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

Je ne suis pas satisfait de la syntaxe native du canevas Il y a deux points : 1. Chaque phrase est précédée de ctx (c'est-à-dire l'objet context2d de canevas), et 2. Chaque fonction ou attribut occupe une ligne, ce qui est une perte d'espace.

J'apprécie vraiment la syntaxe de chaîne de jQuery, telle que :

Copier le code

Le code est le suivant :

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

Par conséquent, je souhaite également utiliser cette syntaxe pour le dessin sur toile :

Copier le code

Le code est le suivant :

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

Une façon consiste à simuler un Objet context2d, cet objet prend en charge toutes les méthodes natives context2d, mais prend également en charge le chaînage.

Cependant, vous ne pouvez pas avoir trop de code, sinon personne n'aimera l'utiliser.

Ce qui suit est l'extrait de code complet. J'ai nommé cette "classe" XtendCanvas (elle commence à nouveau par X) :

Copiez le code.

Le code est le suivant :

// Laisser Canvas prendre en charge la syntaxe de la chaîne, de Ten Years Light
~function () {var pro = ['save ','restaurer', 'scale', 'rotate', 'translate', 'transform', 'createLinearGradient', 'createRadialGradient', 'getLineDash', 'clearRect', 'fillRect', 'beginPath', 'closePath', 'moveTo', 'lineTo', 'quadraticCurveTo', 'bezierCurveTo', 'arcTo', 'rect', 'arc', 'fill', 'AVC', '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. Il peut être utilisé comme context2d ordinaire, mais la différence est qu'il prend en charge la syntaxe de chaîne :

Copier le code

Codez comme suit :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 en une seule phrase, et vous pouvez également interrompre à tout moment, faire autre chose, puis continuer.

Ce code n'est pas une amélioration de Canvas, mais lui permet simplement de prendre en charge la syntaxe de chaîne. Mais l'avantage est qu'il contient moins de code et peut être intégré dans n'importe quelle bibliothèque JS. Ici, j'espère obtenir une "recommandation" de votre part

Il doit y avoir des domaines qui méritent d'être améliorés dans le code, et tout le monde peut l'améliorer. par eux-mêmes. Mais n'oubliez pas le puisatier lorsque vous buvez de l'eau. J'espère que tout le monde se souviendra de moi. Le plus important, c'est l'idée, n'est-ce pas ? Voici l'idée :
Comme vous pouvez le voir, la partie la plus longue du code est le tableau pro qui stocke le nom de la méthode, tandis que le code principal est très court. Pourquoi dois-je créer un tel tableau ?

À l'origine, je voulais hériter de toutes les méthodes natives directement de CanvasRenderingContext2D, mais lors de la traversée de ce CanvasRenderingContext2D dans chaque navigateur, les résultats étaient incohérents. Si j'en hérite directement, lorsque vous souhaitez utiliser la méthode dans Chrome pour l'exécuter dans Firefox, une erreur sera signalée.

Je viens donc d'extraire les méthodes et les noms de propriétés courants et incontestables dans CanvasRenderingContext2D. Il n'y a pas d'autre moyen que de construire un tableau fixe - vous pouvez y ajouter vos méthodes à votre propre discrétion.

Les méthodes et propriétés sont extraites, puis les méthodes natives sont ajoutées à mon nouvel objet. J'ai créé une fonction vide appelée fn pour placer mes méthodes.

Puisque ces éléments du tableau ont à la fois des fonctions et des attributs, j'ai jugé s'il s'agissait d'une fonction dans la boucle. Si c'est une fonction, elle sera exécutée avec des paramètres si ce n'est pas une fonction. ce doit être un attribut, attribuez le paramètre à cet attribut.

De cette façon, lorsque vous définissez l'attribut canvas, vous n'avez pas besoin d'interrompre la chaîne. Vous pouvez simplement passer la valeur de l'attribut directement en paramètre, par exemple :

Copier le codeLe code est le suivant :

ctx.StrokeStyle('#f00')

Enfin, la clé key , qui doit renvoyer fn. Cette astuce a été apprise de jQuery et est la clé pour prendre en charge la syntaxe de la chaîne.

Des fonctions anonymes, des fermetures, des prototypes et l'étrange boucle for dont j'ai parlé dans les articles précédents sont utilisés dans ce paragraphe.

Cela semble assez simple à dire, mais j'y ai vraiment réfléchi pendant longtemps et j'espère que cela sera utile à tout le monde.

Dans le processus d'écriture du code, j'ai trouvé que Chrome a une très bonne approche. Il dispose d'une série de fonctions commençant par set, telles que setStrokeColor, setLineCap et d'autres fonctions. remplacez le StrokeStyle et le lineCap correspondants. En attente d'attributs, c'est-à-dire que son canevas est plein de fonctions et aucun attribut. Dans ce cas, je n'ai pas à juger s'il s'agit d'une fonction ou d'un attribut. Mais cela n’existe pas dans Firefox, je ne peux donc utiliser que l’idée précédente.


Permettez-moi également de libérer la fonction définie :

Copier le codeLe le code est le suivant :

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

Leurs utilisations sont faciles à comprendre en un coup d'œil. Vous pouvez également en sélectionner quelques-uns à ajouter au tableau pro dans le code précédent.

Enfin, je me demande pourquoi mon code n'est pas mis en évidence. . . Si vous l'avez regardé jusqu'au bout, autant me faire une recommandation, pour que je puisse aussi être vaniteux.