Primero veamos una gramática de dibujo de lona normal:
ctx.arc (CenterX, Centery, Radius, 0, Pi*2, verdadero);
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, verdadero);
ctx.fill ();
Hay dos cosas que no estoy contento con la sintaxis nativa de lienzo: 1. Cada oración ha escrito CTX (es decir, el context2d Object of Canvas), y 2. Cada función o propiedad tiene que ocupar una línea, desperdicio de espacio.
Aprecio mucho la sintaxis de la cadena de JQuery, como:
$ ('#div1'). Show (300) .html (p) .delay (3000) .slideUp (300) .remove ();
Entonces, también quiero usar esta sintaxis para hacer dibujo de lienzo:
ctx.moveto (500,0) .lineto (500,500) .StrokeStyle ('#f00'). Stroke ();
Hay una forma de simular un objeto context2d. Este objeto admite todos los métodos context2d nativos, pero también admite métodos encadenados.
Sin embargo, no puede haber demasiado código, ya que habrá más a nadie le gusta usarlo.
El siguiente es el segmento de código completo. Llamé a esta clase XtendCanvas (comienza con X nuevamente):
// Permitir la sintaxis de la cadena de soporte de lienzo, de diez años de luz
~ function () {var pro = ['save', 'restaurar', 'escala', 'rotar', 'traducir', 'transformar', 'createLineArgradient', 'Createradialgradient', 'getLinedash', 'clearRect', 'fillrect', 'beginPath', 'cheSepath', 'Moveto', 'lineeto', lineetO ',' cuáetcurvetO ',' cuájate ',' Cuático ',' CuadratcurvetO ',' Cuático '. 'bezierCurveTo', 'arcTo', 'rect', 'arc', 'fill', 'stroke', 'clip', 'isPointInPath', 'measureText', 'clearShadow', 'fillText', 'strokeText', 'strokeRect', 'drawImage', 'drawImageFromRect', 'putImageData', 'createPattern', 'createImageData', 'getiMagedata', 'linewidth', 'strokestyle', 'globalalpha', 'relleno', 'font', 'shadowoffsetx', 'shadowoffsety', 'shadowblur', 'shadowcolor', 'linecap', 'lineJoin', 'MiterLimit'];
function XtendCanvas (Canvas) {
var ctx = canvas.getContext ('2d'),
fn = function () {},
fnp = fn.prototype;
para (var j = 0, p = pro [0]; p; p = pro [j ++]) {
fn.prototype [p] = function (p) {
Función de retorno () {
var args = array.prototype.slice.call (argumentos);
// console.log (args);
if (typeof ctx [p] == 'function') {
CTX [P] .Apply (CTX, Args);
} demás {
ctx [p] = args+'';
}
devolver fnp;
};
}(pag);
}
devolver nuevo FN;
};
Window.xtendCanvas = XtendCanvas;
} ();
El método de uso es muy simple. Pase un objeto de lienzo y devolverá un objeto similar a context2d. Puede usarlo como context2d ordinario, pero la diferencia es que admite la sintaxis de la cadena:
var cvs = document.getElementById ('cvs');
var ctx = xtendcanvas (cvs);
ctx.moveto (500,0) .lineto (500,500) .StrokeStyle ('#f00'). Stroke ();
De esta manera, puede poner todas las operaciones en una oración, y puede interrumpir en cualquier momento, hacer otras cosas y luego continuar.
Este código no es una mejora para el lienzo, simplemente admite la sintaxis de la cadena. Pero la ventaja es que hay poco código y se puede integrar en cualquier biblioteca JS. Espero recibir una recomendación tuya aquí
Definitivamente, hay algo que vale la pena mejorar en el código, y todos pueden mejorarlo por su cuenta. Pero, no olvido cavar pozos cuando dibujo agua. Espero que todos me recuerden. Lo más importante es la idea, ¿verdad? Aquí está la idea:
Como puede ver, la parte más larga del código es la matriz pro que guarda el nombre del método, y el código central es realmente muy corto. ¿Por qué quiero construir una matriz así?
Originalmente, también quería heredar todos los métodos nativos directamente de CanvasrenderingContext2D, pero cada navegador atravesó el CanvasrenderingContext2D, y los resultados fueron inconsistentes. Si los heredé directamente, cuando desee usar el método en Chrome para ejecutarlo, se informará un error.
Así que acabo de extraer los métodos comunes y no objetivos y los nombres de atributos en CanvasrenderingContext2D. No hay forma, solo puedo crear una matriz fija: todos pueden decidir agregarle su método.
Se extraen los métodos y atributos, y luego los métodos nativos se agregan a mi nuevo objeto. Construí una función vacía llamada FN y coloqué mi método.
Dado que estos elementos en la matriz tienen funciones y atributos, juzgué en el bucle si es una función. Si es una función, se ejecutará con parámetros; Si no es una función, entonces debe ser una propiedad, por lo que asigno los parámetros a esta propiedad.
De esta manera, cuando se encuentra con la configuración del atributo de lienzo, no necesita interrumpir el enlace, simplemente pase el valor del atributo como parámetro, por ejemplo:
ctx.strokestyle ('#f00')
Finalmente, la clave es devolver FN. Este truco se aprendió de JQuery y es la clave para soportar la sintaxis de la cadena.
Este párrafo utiliza funciones anónimas, cierres, prototipos y lo extraño de los bucles de los que he hablado en artículos anteriores.
Parece bastante simple de decir, pero lo he pensado durante mucho tiempo, esperando que sea útil para todos.
Durante el proceso de código de escritura, descubrí que Chrome está muy bien. Tiene una cadena de funciones que comienzan con SET, como SetStrokecolor, SetLineCap y otras funciones. Al pasar los parámetros a ellos, puede reemplazar los atributos correspondientes, como Strokestyle y Linecap. En otras palabras, su lienzo está lleno de funciones y sin atributos, por lo que no tengo que juzgar si es una función o un atributo. Pero no hay tal cosa en Firefox, por lo que solo puedo usar las ideas anteriores.
También publicaré esa cadena de funciones establecidas :var bak = ['setTransform', 'setalpha', 'setCompositEOperation', 'setlineWidth', 'setLineCap', 'setlinejoin', 'setMiterLimit', 'setLinedash', 'setShadow', 'setStokecolor', 'setFillColor'];
Pueden entender sus usos de un vistazo. También puede seleccionar algunas matrices Pro agregadas al código anterior.
Finalmente, me pregunto por qué no se destaca mi código. . . Si ves el final, dame una recomendación y déjame ser vano.