В предыдущей статье я говорил о методах рисования прямоугольников и кругов. Все они имеют нативные функции рисования холста, которые могут быть завершены. Округлый прямоугольник, упомянутый в этой статье, может быть смоделирован только с помощью других методов.
Для обычного закругленного прямоугольника давайте сначала предположим, что округлые углы его четырех углов одинаковы - потому что это легче рисовать. Мы используем способность разделить поверхность на линии, и легко обнаружить, что округлый прямоугольник на самом деле состоит из 4, похожих на крючков.
Говоря о крючках, если вы прочитали мою статью, представляющую Arcto, то вы можете сразу же понять, что такого рода графики можно нарисовать с помощью Arcto.
Когда я говорил о Arcto, я упомянул, что у Arcto есть характеристика, что его второе касательное расширение не повлияет на линии, которые он рисует (в последней части выше), что также обеспечивает удобство для нас, чтобы нарисовать округлые прямоугольники, не беспокоясь о деформации.
Ниже приведен метод рисования закругленных прямоугольников, который я нашел на иностранном веб -сайте, который должен быть наиболее эффективным.
// круглый прямоугольник
CanvasRenderingContext2d.prototype.roundrect = function (x, y, w, h, r) {
if (w & lt; 2 * r) r = w / 2;
if (h & lt; 2 * r) r = h / 2;
this.beginpath ();
this.moveto (x+r, y);
this.arcto (x+w, y, x+w, y+h, r);
this.arcto (x+w, y+h, x, y+h, r);
this.arcto (x, y+h, x, y, r);
this.arcto (x, y, x+w, y, r);
// this.arcto (x+r, y);
this.closepath ();
вернуть это;
}
Параметрами этой функции являются x координата, y координата, ширина, высота и округленного углового радиуса. Обратите особое внимание на последний параметр - округлый угловой радиус.
Этот метод использует Arcto 4 раза, чтобы нарисовать округлый прямоугольник, а дуги каждого угла одинаковы. Точка координаты этого округленного прямоугольника также является тем же верхним левым углом, что и прямоугольник, но его отправной точки здесь нет, а::
Вы можете удалить одну из строк и посмотреть, как этот метод.
Конечно, я хотел бы напомнить вам, что независимо от того, какую форму вы рисуете, вы должны помнить, чтобы закрыть путь - близкий, чтобы не оставлять скрытые опасности.
Этот метод имеет возврат этого в конце, что позволяет использовать синтаксис цепи, например:
ctx.roundrect (200 300,200,120,20) .Stroke (); Вы можете удалить его, если он вам не нужен.
Если вы не хотите расширять прототип ContexTrenderingContext2D, вы также можете использовать этот метод для создания другой функции.
Когда я обнаружил эту функцию, я даже не знал, что такое Arcto, поэтому я не помнил, на каком веб -сайте я ее нашел. Во всяком случае, я не был оригинал. Спасибо автору.
В предыдущей статье я всегда подчеркивал, что каждый угол округленного прямоугольника, нарисованного в этом методе, является последовательным, потому что граница-радий в CSS3 может легко нарисовать закругленные прямоугольники с непоследовательными дугами каждого угла или даже в каждом углу. Я найду способ нарисовать нерегулярные закругленные прямоугольники на холсте, но я лично думаю, что это довольно сложно.