Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
js:canvas:cheat [2025/01/05 19:02] werwolf [Fill rectangle shorthand] |
js:canvas:cheat [2025/01/05 19:12] (текущий) werwolf [String] |
||
|---|---|---|---|
| Строка 47: | Строка 47: | ||
| </code> | </code> | ||
| - | ==== Stroke rectangle shorthand ==== | + | ==== Сокращенный вывод, не заполненного треугольника ==== |
| <code javascript> | <code javascript> | ||
| Строка 53: | Строка 53: | ||
| </code> | </code> | ||
| - | ==== Draw circle ==== | + | ==== Круг ==== |
| <code javascript> | <code javascript> | ||
| Строка 62: | Строка 62: | ||
| - | ===== Styles ===== | + | ===== Стили ===== |
| - | ==== Fill ==== | + | ==== Заполнение ==== |
| <code javascript> | <code javascript> | ||
| Строка 71: | Строка 71: | ||
| </code> | </code> | ||
| - | ==== Stroke ==== | + | ==== Контур ==== |
| <code javascript> | <code javascript> | ||
| Строка 78: | Строка 78: | ||
| </code> | </code> | ||
| - | ==== Linear gradient ==== | + | ==== Линейный градиент ==== |
| <code javascript> | <code javascript> | ||
| Строка 88: | Строка 88: | ||
| </code> | </code> | ||
| - | ==== Radial gradient ==== | + | ==== Радиальный градиент ==== |
| <code javascript> | <code javascript> | ||
| Строка 110: | Строка 110: | ||
| </code> | </code> | ||
| - | ==== Line Join ==== | + | ==== Соединение лини ==== |
| + | |||
| + | context.lineJoin — свойство контекста 2D, которое определяет, как рисуется точка соединения двух линий. 1 | ||
| + | |||
| + | **Оно может принимать следующие значения:** | ||
| + | |||
| + | * miter — прямые соединения, которые образуют прямые углы (значение по умолчанию); 2 | ||
| + | * round — закруглённые соединения; 2 | ||
| + | * bevel — конические соединения. 2 | ||
| + | * Синтаксис: context.lineJoin = 'miter', 'round' или 'bevel'. | ||
| + | |||
| + | **Пример кода для установки разных значений:** | ||
| + | |||
| + | * context.lineJoin = "miter" — рисуется треугольный угол соединения линий; | ||
| + | * context.lineJoin = "bevel" — рисуется плоский (линейный) угол соединения линий; | ||
| + | * context.lineJoin = "round" — рисуется круглый угол соединения линий. | ||
| <code javascript> | <code javascript> | ||
| Строка 116: | Строка 131: | ||
| </code> | </code> | ||
| - | ==== Line Cap ====<code javascript> | + | ==== Line Cap (стиль конца отрезка лини) ==== |
| + | * butt (значение по умолчанию) — у линии будут плоские концы; 5 | ||
| + | * round — у линии будут закруглённые концы, радиус закругления равен половине ширины линии; 1 | ||
| + | * square — у линии будут квадратные концы. | ||
| + | <code javascript> | ||
| context.lineCap = 'butt|round|square'; | context.lineCap = 'butt|round|square'; | ||
| </code> | </code> | ||
| - | ==== Shadow ====<code javascript> | + | ==== Shadow ==== |
| + | <code javascript> | ||
| context.shadowColor = 'black'; | context.shadowColor = 'black'; | ||
| context.shadowBlur = 20; | context.shadowBlur = 20; | ||
| Строка 127: | Строка 147: | ||
| </code> | </code> | ||
| - | ==== Alpha (Opacity) ==== | + | ==== Alpha (Opacity - Непрозрачность) ==== |
| <code javascript> | <code javascript> | ||
| Строка 134: | Строка 154: | ||
| - | ===== Color Formats ===== | + | ===== Цветовые форматы ===== |
| - | ==== String ==== | + | ==== Строка ==== |
| <code javascript> | <code javascript> | ||