Краткое содержание обучения по холсту третье: Рисование контуров — сегменты линий

Некоторые методы рисования в среде рисования Canvas являются методами непосредственного рисования, а некоторые методы рисования основаны на контурах.

Существует только два метода для немедленного рисования графики:strokeRect() и fillRect(). Хотя методы StrokezText() и fillText() также рисуются немедленно, текст не считается графикой.

Большинство систем рисования, таких как: SVG (Scalable Verctor Graphics, масштабируемая векторная графика), Adobe Illustrator и т. д., основаны на путях.

При использовании этих систем рисования вам необходимо сначала определить путь, а затем обвести его или залить, либо вы можете обвести и заполнить его, чтобы можно было отобразить фигуру.

Три метода рисования в Canvas:

В среде рисования Canvas сегменты линий также рисуются на основе путей, называемых линейными путями: сегменты будут нарисованы в Canvas.

Это метод рисования на основе контуров, о котором мы упоминали ранее, который необходимо обвести или заполнить;

Обычно две точки соединяются линией, поэтому нарисовать отрезок линии очень просто. Укажите начальную точку линии с помощью moveTO() и перейдите к другой точке с помощью lineTo().

 функция drawLine() { cxt.moveTo(50, 50); cxt.lineTo(100, 100);}

Однако мы не можем видеть сегменты линий на холсте. Ранее мы упоминали, что метод рисования на основе контуров должен быть обведен или заполнен. Поэтому, чтобы увидеть результат, мы также должны использовать метод Stroke().

Поэтому мы модифицируем метод следующим образом, чтобы был нарисован сегмент линии:

 функция drawLine() { cxt.moveTo(50, 50); cxt.lineTo(200, 200);

Мы также можем рисовать сегменты линий на холсте, используя только lineTo(). Мы изменяем приведенный выше код, как показано ниже, и эффект тот же.

 функция drawLine() { cxt.lineTo(50, 50); cxt.lineTo(200, 200);

Подведем итог использованию методов moveTo() и lineTo().

• moveTo(x,y): переместит обводку в указанные координаты x и y, добавив вложенный путь к текущему пути. Этот метод не удаляет вложенные пути в текущем пути.
• lineTo(x,y): рисует прямую линию от текущей позиции до указанной позиции x и y. Если в текущем пути нет подпутей, то этот метод ведет себя так же, как moveTo(). Если в текущем пути есть подпуть, этот метод добавит указанную вами точку к подпути.

Изменение ширины сегмента линии

 функция = 14; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

 функция drawLine() { cxt.lineWidth = 14; cxt.strokeStyle = 'green'; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

Мы также можем использовать объект CanvasGradient или объект CanvasPattern для добавления цветов или узоров градиента к сегментам линий.

 функция drawLine() { cxt.lineWidth = 14; var градиент = cxt.createLinearGradient(0, 0, Canvas.width/2, Canvas.height/2); градиент.addColorStop(0, 'blue' градиент.addColorStop(); 0,5, «фиолетовый»); градиент.addColorStop(1, «желтый»); cxt.lineTo(50, 50); cxt.lineTo(200, 200);

Из трех методов рисования на холсте выше мы видим, что путь дуги во второй строке — это открытый путь, а путь дуги в последней строке — закрытый путь. Так как же достигается закрытый путь?

Давайте взглянем на два наиболее важных метода рисования контуров на холсте.

• BeginPath(): Очистите все текущие подпути, чтобы сбросить текущий путь и перепланировать путь.
• closePath(): используется для закрытия открытого пути. В этом нет необходимости, если график уже закрыт, то есть текущая точка является начальной, эта функция ничего не делает.

Сначала нарисуйте полилинию

 функция drawLine() { cxt.strokeStyle = 'green'; cxt.moveTo(50, 50); cxt.lineTo(150, 150); );}

Измените код в приведенном выше примере и добавьте в него методы BeginPath() и closePath().

 function drawLine(){ // Обводка треугольника cxt.strokeStyle = 'green'; cxt.beginPath(); cxt.moveTo(50, 50); cxt.lineTo(50, 150); (); cxt.beginPath(); cxt.lineTo(150, 150); cxt.lineTo(150, 250); cxt.stroke();

Видно, что мы нарисовали на холсте два пути.

Примечание. После вызова BeginPath() или при первом создании холста первая команда построения пути обычно рассматривается как moveTo(). Поэтому мы должны сначала использовать BeginPath() при рисовании графики.

Продолжим модифицировать наш код

 function drawLine(){ // Обводка треугольника cxt.strokeStyle = 'green'; cxt.beginPath(); cxt.moveTo(50, 50); cxt.lineTo(50, 150); (150, 150) cxt.closePath(); //Полилиния cxt.translate(150, 0); cxt.strokeStyle = 'red'; cxt.beginPath(); cxt.moveTo(50, 50); cxt.lineTo(50, 150); cxt.lineTo(150, 150); cxt.closePath(); //Зеленый треугольник cxt.translate(150, 0); cxt.fillStyle = 'green'; cxt.beginPath(); cxt.moveTo(50, 50); .lineTo(50, 150); cxt.lineTo(150, 150); cxt.fill(); cxt.closePath(); //Красный треугольник cxt.translate(150, 0); cxt.fillStyle = 'red'; cxt.beginPath(); 50, 50); cxt.lineTo(50, 150); 150); cxt.closePath(); cxt.fill();}

Из приведенного выше примера мы видим, что различные положения closePath() также влияют на нашу графику.

Примечание. Когда вы вызываете функцию fill(), все незамкнутые фигуры автоматически закрываются, поэтому функция closePath() на данный момент не требуется.

Но вызов методаstroke(): Если вы используете closePath() только перед методом Stroke(), будет сформирован закрытый путь. Если вы вызываете метод closePath() после метода Stroke(), графика будет нарисована и будет текущей. путь рисования закрыт, поэтому метод closePath() не работает.

Давайте сначала рассмотрим пример

 function drawLine(){ // Обводка треугольника cxt.lineWidth = 1; cxt.beginPath(); cxt.moveTo(50, 50); cxt.stroke(); ; cxt.moveTo(50,5, 150,5); cxt.lineTo(450,5, 150,5)

На рисунке видно, что мы установили lineWidth обоих сегментов линии равным 1 пикселю, но сегмент линии выше рисует два пикселя.

Если вы нарисуете отрезок линии шириной 1 пиксель на границе определенных 2 пикселей, этот отрезок линии фактически будет занимать ширину 2 пикселя;

Поскольку когда вы рисуете сегмент вертикальной линии шириной 1 пиксель на границе пикселя, объект среды рисования холста попытается нарисовать половину пикселя справа от центральной линии границы, а другую половину пикселя — слева от границы. центральная линия.

Однако невозможно нарисовать отрезок линии шириной в полпикселя внутри полного пикселя, поэтому половина пикселя в обоих направлениях расширяется до 1 пикселя.

С другой стороны, рисование происходит между двумя пикселями, так что половины пикселей слева и справа от центральной линии не будут расширяться, а вместе взятые будут занимать ширину ровно в 1 пиксель. Итак, если вы хотите нарисовать сегмент линии шириной в 1 пиксель, вы должны нарисовать сегмент линии между двумя пикселями.

Теперь, когда мы понимаем, как нарисовать настоящий сегмент линии размером 1 пиксель, давайте начнем рисовать сетку.

 function drawLine(stepx, Stepy){ cxt.lineWidth = 0.5; cxt.strokeStyle = 'green'; //Рисуем вертикальную линию for(var i= Stepx + 0.5; i< cxt.canvas.width; i+= Stepx){ cxt.beginPath(); cxt.moveTo(я, 0); cxt.canvas.height); cxt.stroke(); } // Рисуем горизонтальную линию for(var i= Stepy + 0.5; i< cxt.canvas.height; i+= Stepy) { cxt.beginPath(); moveTo (0, я); cxt.lineTo (cxt.canvas.width, я); cxt.stroke(); }}drawLine(10, 10);

В приведенном выше примере мы рисуем отрезок линии на пикселе между двумя пикселями, а ширина нарисованного отрезка линии составляет всего 0,5 пикселя.

Хотя спецификация Canvas явно не оговаривает это, все реализации Canvas в браузере используют технологию сглаживания для создания эффектов рисования субпиксельных сегментов линий.

В этом разделе в основном объясняется метод рисования линейных путей на холсте. В основном он использует moveTo() для определения начальной точки, lineTo() для определения конечной точки и штрих() для рисования текущего пути. Эти три метода рисуют сегменты линий.

Существует два важных метода рисования путей на холсте: BeginPath() и closePath(). Вызов BeginPath() перед рисованием графики является необходимым шагом для рисования нескольких изображений.

closePath() можно опустить при использовании fill(), также необходимо обратить внимание на позицию вызова метода closePath().

При рисовании сегмента линии мы можем использовать lineWidth, чтобы изменить ширину сегмента линии, и StrokeStyle, чтобы изменить цвет сегмента линии.

Определите границы пикселей сегмента линии, чтобы мы могли нарисовать истинную ширину линии в 1 пиксель.

Учащиеся, которые заинтересованы в рисовании графики на холсте, продолжайте обращать внимание на последующие обновления. Если что-то не так, укажите на это и сообщите больше.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.