Комментарий: В этой статье рассказывается о методе рисования прямоугольников и кругов в холсте, они принадлежат к базовой графике. Конечно, в базовой графике есть не только их, но в холсте только рисование прямоугольников и кругов не требует других методов для моделирования. Заинтересованные друзья могут узнать об этом
В этой статье рассказывается о методе рисования прямоугольников и кругов в холсте, они принадлежат к базовой графике. Конечно, в базовой графике есть больше, чем просто их, но в холсте только рисование прямоугольников и кругов не требует других симуляций.холст рисует прямоугольники
1. Заполнить и строк
FillRect может напрямую заполнить прямоугольник, а стиль заполнения - это стиль, который вы настраиваете в настоящее время; Точно так же Strokerect должен напрямую погладить прямоугольник
Их параметры являются согласованными, в свою очередь (начальная точка x координата, начальная точка Y, ширина прямоугольника, высота прямоугольника). Начальная точка здесь, примечание, относится к точке в верхнем левом углу прямоугольника.
Мы обычно используем их, чтобы делать простые вещи, и они могут делать только простые вещи. Почему? Поскольку слова, которые графика, которую они рисуют, не имеют пути, они вышли напрямую.
Например, если вы сначала заполните прямоугольник заполнением, то вы хотите погладить прямоугольник. Если вы используете Incke (), не будет никакого эффекта, потому что, хотя в настоящее время есть прямоугольник, пути нет.
Если вы хотите погладить этот прямоугольник, вы можете использовать Strokerect (), чтобы погладить прямоугольник в том же положении - но они на самом деле являются независимыми, просто перекрывающимися позициями.
Ctx.FillRect (200,100,50,40);
ctx.strokerect (200,100,50,40);
Если мы хотим, чтобы прямоугольник был заполнен и погладил, это, несомненно, будет обременительно использовать FillRect и Strokerect одновременно. Таким образом, в этом случае мы обычно используем следующий метод.
2, rect
Параметры прямого не отличаются от заполнения и стрелка. Разница в том, что они только протягивают путь, и вы должны завершить ход или заполнить себя позже.
ctx.rect (300,100,50,40);
ctx.stroke ()
ctx.fill ();
Каковы преимущества этого? В предыдущей статье я упомянул, что наполнение или инсульт потребляет много ресурсов, поэтому мы часто (например, петли) должны нарисовать сотни путей одновременно, а затем инсульт или заполнять. В настоящее время используйте прямо, чтобы нарисовать путь, а затем заполните его снова, что позволяет избежать проблемы заполнения и наполнения или инсульта Strokerec каждый раз.
3. Линото
Конечно, вы также можете использовать 4 Linesto Drait прямоугольник, как мой учебник по рисованию линии. Но это ненужно, пожалуйста, ознакомьтесь с этой статьей для получения подробной информации.
Холст рисовать круг
У неба нет глаз. На самом деле, Canvas не имеет реальной функции, которая может напрямую нарисовать круг. То, что он рисует, на самом деле 360-градусная дуга, которая выглядит как круг.
Мы упомянули функцию холста, чтобы нарисовать дугу раньше, то есть ARC. Мы используем его, чтобы нарисовать круг:
Ctx.ARC (300+25 100+20,20,0, Math.pi*2);
ctx.stroke ()
ctx.fill ();
Эта дуга такая же, как прямо, и путь пройден, и начинка или ход должны быть завершены позже.
Но следует отметить, что суждение по положению круга отличается от суждения прямоугольника. Мы определяем его положение с верхним левым углом прямоугольника в качестве отправной точки, но обычно определяем положение круга центром круга.
Если вы хотите нарисовать набор прямоугольников и кругов, которые центрируются по горизонтали и вертикально, то вы должны помнить, что не следует рассматривать отправную точку прямоугольника как начальную точку круга - начальная точка круга - это центр круга!
Забудьте об этом, я дам вам формулу, выровненные круги и прямоугольники, координаты центра круга = координаты прямоугольников + половина ширины и высоты прямоугольников.
То есть центр круга x = прямоугольник x + ширина прямоугольника/2, и круг y = прямоугольник y + высота прямоугольника/2. Таким образом, они абсолютно выровнены.
Хотя ARC не так простой в использовании, как метод непосредственно рисования кругов - метод непосредственно рисования, которые я представлял, требует только 3 параметра, а именно центральные координаты, то есть радиус, но ARC может не только рисовать круги, но и нарисовать полукруги, так что он более мощный и может использоваться.
Поскольку есть круг, должен быть эллипс, но нет никакой обычной функции, чтобы нарисовать круг на холсте, не говоря уже о эллипсе. Следовательно, эллипсы рисования должны быть смоделированы с использованием других методов. Это довольно сложно, поэтому я оставлю это на следующий шаг.