Если вы еще не знаете, что такое Canvas, вы можете проверить предыдущую статью.
При обучении рисованию линии являются самыми основными, и соединение линий может формировать любую форму. То же самое верно в холсте.
Прежде чем начать, мы убираем холст и кисти:
var cvs = document.getElementbyId ('cvs'); //Холст
var ctx = cvs.getContext ('2d'); // Щетка
Когда мы рисуем, точка ручки не фиксированная и изменится в любое время. Хотя Canvas не определяет точку письма через руки, есть также метод, который является Moveto. Moveto эквивалентен съемке кончика ручки с холста и перемещению его в указанную точку (то есть координаты).
ctx.moveto (x, y)
Во время этого процесса не нарисована графика, что эквивалентно раскачиванию на холсте с вашей ручкой.
Но это бесполезно покачиваться, мы должны начать рисовать. Нарисуйте самые простые: прямые линии
Метод рисования прямой линии - это Lineto. Его параметры такие же, как Moveto, и они оба одинакова.
Ctx.LineTo (x, y) Конечно, когда вы нарисуете линию, точка ручки также движется, поэтому после Lineto точка ручки становится ее целевой точкой.
ctx.moveto (100 100);
Ctx.LineTo (200 100);
В настоящее время вы обновляете веб -страницу и обнаружите, что на холсте нет ожидаемой строки и ничего. Потому что у нас есть один меньше шага. Если мы хотим, чтобы он показал это, мы должны нарисовать его.
Студенты, которые использовали PS, определенно будут знать два режима графики, один наполняется, а другой - инсульт. Теперь мы нарисовали линию, которая эквивалентно рисованию пути в PS. В настоящее время мы можем нарисовать края пути, и фигура будет отображаться.
Метод холста -хода - ход (). Теперь давайте завершим код:
ctx.moveto (100 100);
Ctx.LineTo (200 100);
Ctx.Stroke (); обновить в это время, и вы можете увидеть линию. Конечно, вы также можете провести сотни путей последовательно, а затем выполнить инсультные действия, чтобы нарисовать сотни линий одновременно. Теперь давайте нарисуем прямоугольник с 4 линиями:
ctx.moveto (100 100);
Ctx.LineTo (200 100);
ctx.lineto (200 200);
Ctx.LineTo (100 200);
Ctx.LineTo (100 100);
ctx.stroke ();
Здесь мы сначала нарисуем все пути, а затем погладили их один за другим.
- Жалоба автора: одна из плохих вещей в рисунке холста заключается в том, что она в основном зависит от угадывания, и это не интуитивно понятно.
Серьезный совет: процесс рисования холста (то есть заполнение и ход) очень занимается ресурсами. Если вы хотите сохранить системные ресурсы и повысить эффективность, лучше всего нарисовать все пути и заполнить или погладить рисунку одновременно.
Из приведенной выше рисунка мы видим, что толщина линии по умолчанию составляет 1px, а цвет линии черный. Конечно, мы можем установить их, но странная вещь в том, что ширина линии - это ширина линии, в то время как стиль линии называется Strokestyle. Почему не Linestyle? Я тоже не знаю. :
ctx.linewidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
Приведенный выше код устанавливает ширину линии на 10px, а цвет линии становится полупрозрачным красным.
Как показано на рисунке 1, обновите его, кажется, что -то не так! Почему в верхнем левом углу не хватает маленького кусочка? Это не иллюзия. Причина начинается с того, как рисунок на линии холста.
Вопрос: Если путь прямоугольника, который я рисую, составляет 100 по ширине и высоте, а ширина моей края составляет 10px, то какова общая ширина и высота этого прямоугольника с нарисованным краем? Это 100+10*2 = 120?
Если край полностью вытягивается за пределами пути, то это 120. Но холст - нет. Линии в холсте имеют среднюю линию, которая расположена в абсолютной середине линии, а удары линии простираются на обе стороны с средней линией. Например, если ширина вашей линии составляет 1, то центральная линия составляет 0,5; Если ширина составляет 5, то центральная линия составляет 2,5. Когда фигура холста поглощена, путь подходит по средней линии линии, а затем инсульт. Как показано на рисунке 2:
Следовательно, при погладке, половина линии находится снаружи, а половина находится внутри, то есть общая ширина верхнего прямоугольника составляет 100+ (10/2)*2, что равна 110.
Именно по этой причине естественно иметь недостающий угол в левом верхнем углу. Потому что никто не нарисовал его здесь.
Но почему в оставшихся углах нет пробелов? Посмотрите на свою фотографию, разве в четырех углах не будет пробелов?
Это потому, что я не поднимал кисть во время рисунка линий, и кисти были непрерывными, то есть я раньше не двигался. Если вы не верите в это, давайте сейчас двигаться:
ctx.moveto (100 100);
Ctx.LineTo (200 100);
ctx.moveto (200 100); // ПРИМЕЧАНИЕ ЗДЕСЬ
ctx.lineto (200 200);
Ctx.LineTo (100 200);
Ctx.LineTo (100 100);
ctx.linewidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
ctx.stroke ();
Мы переехали, прежде чем нарисовать вторую строку, и координаты движения не изменились, и это все же точка, но после обновления фигура становится такой [рис. 3]:
Понял? Потому что мы подняли ручку.
Теперь давайте удалим Moveto, не беспокойтесь об этом, давайте подумаем о том, как заполнить недостающий угол в левом верхнем углу?
Во -первых, позвольте мне задать вопрос, закрыт ли наш путь? Разве это не чепуха? Разве мы уже не повернули путь к происхождению? Конечно, это закрыто!
неправильный! Это просто делает последнюю точку пути перекрываться с отправной точкой, но сам путь не закрыт!
Как закрыть путь в холсте? Используйте closePath ().
ctx.moveto (100 100);
Ctx.LineTo (200 100);
ctx.lineto (200 200);
Ctx.LineTo (100 200);
Ctx.LineTo (100 100);
ctx.closepath (); // close path
ctx.linewidth = 10;
ctx.strokestyle = 'rgba (255,0,0,0,5)';
ctx.stroke ();
Освежающее в это время сделает вас идеальным квадратом. Рисунок 4:
Независимо от того, насколько толстым мы меняем линии - чем толще, тем больше людей они нравятся, верно? -Четыре угла этого квадрата являются обычными прямыми углами и не будут гладкими. В чем дело с гладким углом? Пожалуйста, смотрите квадратный ход в PS, Рисунок 5:
Я видел это. Чем толще край, тем больше дуга его угловой.
Если я думаю, что линии краев в холсте такие же, как и в PS, есть ли какой -нибудь путь? Конечно, есть атрибут Linejoin.
Linejoin, что означает пересечение линий, имеет 3 свойства: Miter (по умолчанию, острый угол), коник (коник) и круглый (круглый), как показано на рисунке 6:
Нет сомнений в том, что мы можем понять, что наш прямоугольник использует острые углы, поэтому попробуйте изменить его на округлые углы:
Графика стала такой, рис. 7:
Это немного похоже на PS, верно?
Кроме того, из предыдущего изображения мы узнали, что два конца линии холста плоские, можно ли изменить? В конце концов, это не красиво.
Также возможно, то есть свойство LineCap, которое является конечной точкой, которая определяет линию. LineCap имеет 3 значения: Butt (Flat, по умолчанию), круглый (круг), квадрат (квадрат), как показано на рисунке 8
Вы можете обнаружить, что плоская головка на самом деле такая же, как квадратная головка, единственное отличие состоит в том, что плоская головка не растянута. Как круглая голова, так и квадратная голова вытянуты в кусок. Как долго этот раздел? Это половина ширины линии.
Вы когда -нибудь думали о чем -нибудь? Ха -ха, предыдущая проблема с закрытым путем, если мы установим LineCap как квадратный заголовок, эффект будет таким же!
Но чтобы быть в безопасности, нам все равно нужно закрыть путь, помните!
Я также хочу напомнить вам: в закрытом пути нет конечных точек! Таким образом, стиль конечной точки не виден на закрытом пути.
Кроме того : LineCap немного похож на Linejoin, будьте осторожны, чтобы не возиться.Если у вас острые глаза и не повезло, вы можете обнаружить, что иногда линии 1 пикселя не имеют ширины 1 пикселя, но кажется, что они более шире и размыты. Как показано на рисунке 9:
Поздравляю! Вы столкнулись с ошибкой, которая не была ошибкой. Это очень особенное, я поставлю его в следующую статью