Canvas линия

"canvas линия", как нарисовать линию в canvas javascript!? Какие виды линий рассмотрим в канвасе? Горизонтальная линия в канвас. Вертикальная, по диагонали линия в canvas.

раскрасим/покрасим линию, изменим толщину линий канвас!

Все виды линий в canvas.

1. Линия по диагонали - canvas
Скачать пример линия - canvas
2. Линия по диагонали - canvas(левый нижний - правый верхний)
Скачать пример линия - canvas
3. Вертикальная линия от края до края canvas.
Скачать пример линия - canvas
4. Горизонтальная линия от края до края canvas.
Скачать пример линия - canvas
5. Толщина линии canvas.
Скачать пример линия - canvas
6. Покрасить линию canvas.
Скачать пример линия - canvas
7. Закруглить края линии canvas.
Скачать пример линия - canvas

Левый верхний на правый нижний по диагонали линия canvas.

Создаем "канвас html" :

<canvas id="myCanvas" width="600" height="200">Ваш браузер не поддерживает canvas</canvas>

Создаем объект с помощью getElementById, чтобы взаимодействовать с "canvas html".

var canvas = document.getElementById("myCanvas");

В случае, если браузер не поддерживает "canvas" выводим:

Ваш браузер не поддерживает canvas

Метод HTMLCanvasElement.getContext() возвращает контекст рисования на холсте:

var context = canvas.getContext("2d");

Далее :

beginPath() - начинает контур или сбрасывает текущий контур.

moveTo() - передвигает точку контура в заданные координаты не рисуя линию.

Начальная точка линии в canvas - сделаем её в нулевой точке(это верхний левый угол):

context.moveTo( 0, 0);

lineTo() - добавляет новую точку контура и создает линию к этой точке от последней заданной точки

Вторая точка будет противоположная по диагонали в правом нижнем углу - это максимальная ширина + максимальная высота canvas -см здесь выше пункт №1.

context.lineTo( 600, 200);

stroke() - рисует фигуру, контур которой был задан ранее.

Соберем весь код вместе:

Пример линии по диагонали canvas Левый верхний на правый нижний .

У меня на сайте только живой пример:

Используем приведенную теорию и воплотим её в реальный пример линии по диагонали и разместим его прямо здесь:




Линия по диагонали - canvas(левый нижний - правый верхний

Вторую линию по диагонали в canvas нарисуем из левого нижнего угла в правый верхний угол!

Для этого вам понадобитсяч:

Теория из предыдущего пункта.

И всего лишь поменять начальные координаты начали линии на нулевую по оси "x" и максимальную высоту canvas в 200px:

context.moveTo( 0, 200);

А конечная точка нашей линии в canvas будет правый верхний угол, его координаты будут.. по оси "x" ширина canvas в 600px, по оси "y" ноль.

context.lineTo( 600, 0);

Линия canvas левый нижний на правый верхний по диагонали.

Вот живой пример:




Вертикальная линия от края до края canvas.

Следующий пример - сделаем вертикальную линию посередине нашего холста!

Для этого вам понадобится:

Теория из самого первого пункта ...

И всего лишь изменить координаты линии, которую вы собираетесь нарисовать!

Посередине оси "х" это будет .... ширина нашего холста 600px деленное пополам = 300, по оси "Y" = 300

context.moveTo( 300, 0);

Вторая точка это будет по оси "X" = 300, по оси "Y" = 300:

context.lineTo( 300, 300);

Вертикальная линия canvas от края до края.

Вот живой пример:




Горизонтальная линия от края до края canvas.

Следующий пример - сделаем горизонтальную линию посередине нашего холста!

Вам понадобится:

Теория из самого первого пункта ...

И всего лишь изменить координаты линии, которую вы собираетесь нарисовать!

По оси "х" это будет = 0. Ширина нашего холста 200px деленное пополам = 100, по оси "Y" = 100

context.moveTo( 0, 100);

Вторая точка это будет по оси "X" = 600, по оси "Y" = 100:

context.lineTo( 600, 100);

Пример горизонтальная линия от края до края canvas.




Толщина линии canvas.

Как изменить толщину линии в canvas - для этого вам понадобится:

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

Используем lineWidth со значением "15"

context.lineWidth = 15;

Пример : Толщина линии canvas.




Покрасить линию canvas.

Как изменить цвет линии в canvas?

Для этого вам понадобится:

Теория из самого первого пункта ...

+ Нам нужен уже готовый пример... возьмем из предыдущего пункта...

Используем strokeStyle со значением "#ff0000"

context.strokeStyle = "#ff0000";

Соберем весь код данного примера крашеной линии в canvas:

Пример: Покрасить линию canvas.

Выведем тот код цветной линии в canvas прямо здесь:




Закруглить края линии canvas.

Как закруглить края ц линии в canvas?

Для этого вам понадобится:

Теория из самого первого пункта ...

+ Нам нужен уже готовый пример... возьмем из предыдущего пункта...

Используем lineCap со значением "round"

context.lineCap = "round";

Соберем весь код данного примера крашеной линии в canvas:

Пример: Закруглить края линии canvas.