Настройка рисования

Последнее обновление: 05.11.2023

Контекст элемента 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":

Настройка цвета рисования контура фигуры на canvas в JavaScript с помощью свойства strokeStyle

Установим с помощью свойства fillStyle цвет заливки:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
context.fillStyle = "#ee5253";     // устанавливаем цвет заполнения фигуры
context.fillRect (10, 10, 100, 100);
Настройка цвета заполнения фигуры на canvas в JavaScript с помощью свойства fillStyle

Естественно мы можем комбинировать несколько методов:

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);     // прямоугольник без заполнения
установка цвета для canvas в javascript

Толщина линий

Свойство 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);
установка ширины линии для canvas в javascript

setLineDash

Метод 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);
установка расстояний между линиями на canvas с помощью свойства setLineDash в javascript

Тип соединения линий

Свойство 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);
Соединение линий на canvas и свойство lineJoin в JavaScript

Прозрачность

Свойство 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 выводятся два прямоугольника: синий и красный. Но до вывода красного прямоугольника установлена полупроразность отрисовки, поэтому сквозь красный прямоугольник мы сможем увидеть и синий:

Установка прозрачности на canvas в JavaScript

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм