Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Синтаксис. Доступны три значения: miter (используется по умолчанию), round, bevel





lineJoin[=value]

Доступны три значения: miter (используется по умолчанию), round, bevel. Если не задавать значение, тогда будет происходить чтение свойства.

Пример

Javascript

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

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

 

// miter

context.beginPath();

context.moveTo(canvas.width / 2 - 50 - 140, canvas.height - 50);

context.lineTo(canvas.width / 2 - 140, 50);

context.lineTo(canvas.width / 2 + 50 - 140, canvas.height - 50);

context.lineWidth = 25;

context.lineJoin = "miter";

context.stroke();

 

// round

context.beginPath();

context.moveTo(canvas.width / 2 - 50, canvas.height - 50);

context.lineTo(canvas.width / 2, 50);

context.lineTo(canvas.width / 2 + 50, canvas.height - 50);

context.lineWidth = 25;

context.lineJoin = "round";

context.stroke();

 

// bevel

 

 

Свойство lineWidth

Определяет толщину линий.

Синтаксис

lineWidth[=value]

Значение — положительное число в пикселях. Если не задавать значение, тогда будет происходить чтение свойства.

Пример

Javascript

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

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

context.moveTo(100, 150);

context.lineTo(450, 50);

context.lineWidth = 15;

context.stroke();

 

 

Свойство miterLimit

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

Свойство miterLimit задает максимально допустимое расстояние для "дорисовки". Если для соединения линий требуется большее расстояние, тогда они будут соединены как bevel.

Синтаксис

miterLimit [=value]

Значение — число не менее 1.0 (значение меньше будет восприниматься как 1.0). По умолчанию miterLimit = 10.0. Значение 1.0 означает отсутствие удлинения.

Пример

Javascript

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

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

 

ctx.miterLimin = 5.2;

ctx.moveTo(20,10);

ctx.lineTo(30,30);

ctx.lineTo(40,40);

ctx.stroke();

 

 

Свойство strokeStyle

Определяет цвет линий.

Синтаксис

strokeStyle[=value]

Значение — имя цвета, или шестнадцатиричный код, или rgb/rgba. Если не задавать значение, тогда будет происходить чтение свойства.

Пример

Javascript

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

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

context.moveTo(100, 150);

context.lineTo(450, 50);

context.strokeStyle = "#ff0000";

context.stroke();

 

 

Свойство textAlign

Определяет выравнивание текста.

Синтаксис

textAlign[=value]

Значение — один из следующих вариантов:

·start (по умолчанию) — по правому краю;

·end — по правому краю.

·left — по левому краю;

·right — по правому краю;

· center — по центру;

Выравнивание происходит относительно указанных координат начала текста.

Значение start / left и right/ end совпадут когда к у нас направление текста ltr. И наоборот, start / right и left / end совпадут для rtl.

Пример

Javascript

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

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

 

ctx.font = "italic bold 16px Arial";

ctx.textBaseline = "Top";

ctx.fillStyle = "blue";

ctx.fillText("Учим canvas", 40, 100);

 

ctx.font = "normal normal 32px Tahoma";

ctx.textAlign = "center";

ctx.strokeText("canvas оживит сайты", 300, 200);

 

 







Дата добавления: 2015-10-19; просмотров: 389. Нарушение авторских прав; Мы поможем в написании вашей работы!




Обзор компонентов Multisim Компоненты – это основа любой схемы, это все элементы, из которых она состоит. Multisim оперирует с двумя категориями...


Композиция из абстрактных геометрических фигур Данная композиция состоит из линий, штриховки, абстрактных геометрических форм...


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


ТЕОРЕТИЧЕСКАЯ МЕХАНИКА Статика является частью теоретической механики, изучающей условия, при ко­торых тело находится под действием заданной системы сил...

Классификация и основные элементы конструкций теплового оборудования Многообразие способов тепловой обработки продуктов предопределяет широкую номенклатуру тепловых аппаратов...

Именные части речи, их общие и отличительные признаки Именные части речи в русском языке — это имя существительное, имя прилагательное, имя числительное, местоимение...

Интуитивное мышление Мышление — это пси­хический процесс, обеспечивающий познание сущности предме­тов и явлений и самого субъекта...

Определение трудоемкости работ и затрат машинного времени На основании ведомости объемов работ по объекту и норм времени ГЭСН составляется ведомость подсчёта трудоёмкости, затрат машинного времени, потребности в конструкциях, изделиях и материалах (табл...

Гидравлический расчёт трубопроводов Пример 3.4. Вентиляционная труба d=0,1м (100 мм) имеет длину l=100 м. Определить давление, которое должен развивать вентилятор, если расход воздуха, подаваемый по трубе, . Давление на выходе . Местных сопротивлений по пути не имеется. Температура...

Огоньки» в основной период В основной период смены могут проводиться три вида «огоньков»: «огонек-анализ», тематический «огонек» и «конфликтный» огонек...

Studopedia.info - Студопедия - 2014-2025 год . (0.009 сек.) русская версия | украинская версия