Давайте сначала посмотрим на обычную грамматику рисунка на холсте:
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, Центр);
Ctx.LineTo (CenterX -Radius, Центр - 50);
Ctx.LineTo (CenterX+Radius, Центру - 50);
Ctx.LineTo (CenterX+Radius, Centery);
// ctx.lineTo (CenterX-Radius, Центр);
ctx.fill ();
ctx.beginpath ();
ctx.fillstyle = 'rgba (255,0,0,1)';
ctx.arc (CenterX, Centery-50, Radius, 0, Pi*2, True);
ctx.fill ();
Есть две вещи, которые я не доволен нативным синтаксисом холста: 1. Каждое предложение написало CTX (то есть объект Context2D Canvas), и 2. Каждая функция или свойство должны занять одну строку, тратя пространство.
Я очень признателен за синтаксис jQuery's Chain, например:
$ ('#Div1'). Show (300) .html (p) .delay (3000) .slideup (300) .remove ();
Итак, я также хочу использовать этот синтаксис для выполнения рисунка холста:
ctx.moveto (500,0) .lineto (500 500) .Strokestyle ('#f00'). Incke ();
Есть способ имитировать объект Context2D. Этот объект поддерживает все нативные методы Context2D, но также поддерживает цепные методы.
Тем не менее, кода не может быть слишком много, так как никто не любит его использовать.
Ниже приведен полный сегмент кода. Я назвал этот класс xtendcanvas (он снова начинается с x):
// Пусть синтаксис поддержки цепочки холста, от десяти лет света
~ function () {var pro = ['Save', 'Restore', 'Scale', 'rotate', 'transtate', 'transform', 'createrInearGradient', 'createradialgradient', 'getlinedash', 'clearRect', 'fillRect', 'startpath', 'rolypathe', 'moveto', 'lineto', 'quideto «beziercurveto», «arcto», «rect», «arc», 'fill', 'sturk', 'clip', 'ispointinpath', 'measuretext', 'clearshadow', 'filestext', 'Stroketext', 'Strokerext', 'Drawimage', 'DrawmageFromRect', putimAgedAtaTa ',' CreateMage ',', ',' CreatiMage ',', ',' CreateImageTageAgeTAGET «getimagedata», «linewidth», «Strokestyle», «globalalpha», «fillstyle», «font», «shadowoffsetx», «shadowOffsety», «shadowblur», «shadowColor», «lineCap», 'linejoin', 'mitherlimit'];
функция 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 (аргументы);
// console.log (args);
if (typeof ctx [p] == 'function') {
ctx [p] .apply (ctx, args);
} еще {
ctx [p] = args+'';
}
вернуть FNP;
};
} (p);
}
вернуть новый FN;
};
window.xtendcanvas = xtendcanvas;
} ();
Метод использования очень прост. Пропустите его объект Canvas, и он вернет объект, похожий на Context2D. Вы можете использовать его как обычный контекст2D, но разница в том, что он поддерживает синтаксис цепи:
var cvs = document.getElementbyId ('cvs');
var ctx = xtendcanvas (cvs);
ctx.moveto (500,0) .lineto (500 500) .Strokestyle ('#f00'). Incke ();
Таким образом, вы можете поставить все операции в одном предложении, и вы можете прервать в любое время, делать другие вещи, а затем продолжить.
Этот код не является улучшением холста, он просто поддерживает синтаксис цепи. Но преимущество в том, что кода мало, и он может быть встроен в любую библиотеку JS. Я надеюсь получить от вас рекомендацию здесь
Определенно есть что -то, что стоит улучшить в коде, и каждый может улучшить его самостоятельно. Но - я не забываю копать скважины, когда я рисую воду. Надеюсь, все вспоминают меня. Самая важная вещь - это идея, верно? Вот идея:
Как видите, самой длинной частью кода является Array Pro, которая сохраняет имя метода, а код ядра на самом деле очень короткий. Почему я хочу построить такой массив?
Первоначально я также хотел унаследовать все собственные методы непосредственно от CanvasRenderingContext2D, но каждый браузер пересекал CanvasRenderingContext2D, и результаты были непоследовательными. Если я наследую их напрямую, тогда, когда вы хотите использовать метод в Chrome для его выполнения, сообщается об ошибке.
Поэтому я просто извлекил общие, необъяснительные методы и имена атрибутов в CanvasRenderingContext2D. Там нет способа, я могу только создать фиксированный массив - каждый может решить добавить ваш метод.
Методы и атрибуты извлекаются, а затем нативные методы добавляются в мой новый объект. Я построил пустую функцию, называемую FN, и поместил свой метод.
Поскольку эти элементы в массиве имеют как функции, так и атрибуты, я оценил в цикле, является ли это функцией. Если это функция, она будет выполнена с параметрами; Если это не функция - то это должно быть свойство, поэтому я назначаю параметры этому свойству.
Таким образом, когда вы сталкиваетесь с настройкой атрибута Canvas, вам не нужно перебивать ссылку, просто передайте значение атрибута в качестве параметра, например:
ctx.strokestyle ('#f00')
Наконец, ключ - вернуть FN. Этот трюк был изучен от jQuery и является ключом к поддержке синтаксиса цепи.
В этом параграфе используются анонимные функции, закрытия, прототипы и странные для петли, о которых я говорил в предыдущих статьях.
Кажется, довольно просто сказать, но я долго думал об этом, надеясь, что это будет полезно для всех.
Во время процесса написания кода я обнаружил, что Chrome делает очень хорошо. Он имеет ряд функций, начинающихся с набора, такой как SetStrokeColor, SetLineCap и другие функции. Передавая им параметры, он может заменить соответствующие атрибуты, такие как Strokestyle и LineCap. Другими словами, его холст полон функций и никаких атрибутов, поэтому мне не нужно судить, является ли это функцией или атрибутом. Но в Firefox нет такого понятия, поэтому я могу использовать только предыдущие идеи.
Я также выпущу эту строку функций набора :var bak = ['settransform', 'setalpha', 'setcompositeoperation', 'setlinewidth', 'setlinecap', 'setlinejoin', 'setmiterlimit', 'setlinedash', 'setshadow', 'setStrokeColor', 'setFillColor'];
Они могут понять свое использование с первого взгляда. Вы также можете выбрать некоторые Pro массивы, добавленные в предыдущий код.
Наконец, мне интересно, почему мой код не выделен. Полем Полем Если вы видите конец, дайте мне рекомендацию и позвольте мне быть тщеславным.