Контекст элемента canvas - объект CanvasRenderingContext2D
предоставляет ряд свойств, с помощью которых можно настроить
отрисовку на canvas. К подобным свойствам относятся следующие:
strokeStyle: устанавливает цвет линий или цвет контура. По умолчанию установлен черный цвет
fillStyle: устанавливает цвет заполнения фигур. По умолчанию установлен черный цвет
lineWidth: устанавливает толщину линий. По умолчанию равно 1.0
lineJoin: устанавливает стиль соединения линий
globalAlpha: устанавливает прозрачность отрисовки на canvas
setLineDash: создает линию из коротких черточек
В прошлой теме при отрисовке прямоугольников мы явным образом не устанавливали никаких цветов, поэтому для цвета линий и заливки прямоугольников использовался цвет по умолчанию - черный. Теперь используем другие цвета. Цвет может определяться в различных форматах:
В виде названия цвета, например, "red" или "green"
В виде шестнадцатеричного значения цвета, например, "#00FFFF"
В виде значения в формате rgb, например, "rgb(0, 0, 255)"
В виде значения в формате rgba, например, "rgba(0, 0, 255, 0.5)"
Например, устанавливим цвет контура или границы фигур с помощью свойства strokeStyle:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>METANIT.COM</title> </head> <body> <canvas id="canvas" width="400" height="250"></canvas> <script> const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.strokeStyle = "#ff0000"; // устанавливаем цвет контура фигуры context.strokeRect (10, 10, 100, 100); </script> </body> </html>
В данном случае в качестве цвета контура устанавливается красный цвет или "#ff0000":
Установим с помощью свойства fillStyle
цвет заливки:
const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.fillStyle = "#ee5253"; // устанавливаем цвет заполнения фигуры context.fillRect (10, 10, 100, 100);
Естественно мы можем комбинировать несколько методов:
const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.fillStyle = "#c7ecee"; // устанавливаем цвет заполнения фигуры context.fillRect (10, 10, 100, 100); context.strokeStyle = "#22a6b3"; // устанавливаем цвет контура фигуры context.strokeRect (10, 10, 100, 100); context.fillRect (120, 10, 100, 100); // прямоугольник без границы context.strokeRect (230, 10, 100, 100); // прямоугольник без заполнения
Свойство lineWidth
позволяет установить толщину линии:
const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.fillStyle = "#c7ecee"; // устанавливаем цвет заполнения фигуры context.fillRect (10, 10, 100, 100); context.strokeStyle = "#22a6b3"; // устанавливаем цвет контура фигуры context.lineWidth = 4.5; // устанавливаем толщину линии context.strokeRect (10, 10, 100, 100);
Метод setLineDash()
в качестве параметра принимает массив чисел, которые устанавливают расстояния между линиями. Например:
const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.strokeStyle = "red"; context.setLineDash([15,5]); context.strokeRect(10, 10, 100, 100); context.strokeStyle = "blue"; context.setLineDash([2,5,6]); context.strokeRect(130, 10, 100, 100); context.strokeStyle = "green"; context.setLineDash([2]); context.strokeRect(250, 10, 100, 100);
Свойство lineJoin
отвечает за тип соединения линий в фигуре. Оно может принимать следующие значения:
miter
: прямые соединения, которые образуют прямые углы. Это значение по умолчанию
round
: закругленные соединения
bevel
: конические соединения
const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.strokeStyle = "red"; context.lineWidth = 10; context.lineJoin = "miter"; context.strokeRect(10, 10, 100, 100); context.lineJoin = "bevel"; context.strokeRect(130, 10, 100, 100); context.lineJoin = "round"; context.strokeRect(250, 10, 100, 100);
Свойство globalAlpha
задает прозрачность отрисовки. Оно может принимать в качестве значения число от 0 (полностью прозрачный) до 1.0 (не прозрачный):
const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); context.fillStyle = "blue"; context.fillRect(50, 50, 100, 100); context.globalAlpha = 0.5; context.fillStyle = "red"; context.fillRect(100, 100, 100, 100);
Здесь на canvas выводятся два прямоугольника: синий и красный. Но до вывода красного прямоугольника установлена полупроразность отрисовки, поэтому сквозь красный прямоугольник мы сможем увидеть и синий: