Войти
s-lub » Учебники » HTML 5 » Применение стилей в canvas

Применение стилей в canvas

Применение стилей в canvas

С помощью стилей можно менять цвета фигур, что позволяет более точно отрисовать необходимый объект или фигуру.

Цвета

Для изменения цвета в canvas необходимо использовать свойства: fillStyle и strokeStyle, при чём свойство fillStyle используется для применения цвета к закрашенным, а strokeStyle для применения цвета к не закрашенным фигурам.

Пример

<canvas id='draw' style='border:1px solid' width='300' height='150'></canvas>
<script type='text/jаvascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.fillStyle="green";
x.fillRect(10,40,65,65);
x.strokeStyle="#FF45FF"
x.strokeRect(100,40,65,65);
x.fillStyle="rgb(255,73,73)"
x.fillRect(190,40,65,65);

</script>

Пример 2

<canvas id='draw' style='border:1px solid' width='300' height='150'></canvas>
<script type='text/jаvascript'>

var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.fillStyle="rgba(0,0,0,0.5)";
x.fillRect(10,40,65,65);
x.fillStyle="rgba(0,0,0,0.1)";
x.fillRect(100,40,65,65);
x.fillStyle="rgba(0,0,0,1)";
x.fillRect(190,40,65,65);

</script>

Из примеров видно, что цвета можно устанавливать, как шестнадцатеричном значении, так и помощью rgba, что позволяет задать не только цвет элементу, но и придать ему прозрачность.

Оформление линий

В HTML5 имеются несколько свойств для оформления линий нарисованных с помощью метода lineTo(): lineWidth, lineCap, lineJoin.
С помощью свойства lineWidth Вы можете установить ширину линии (по умолчанию линии имеют ширину 1 пиксель).
На примере мы нарисовали линию толщиной 10 пикселей.

<canvas id='draw' style='border:1px solid' width='300' height='150'></canvas>
<script type='text/jаvascript'>

var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.beginPath()
x.moveTo(10,10);
x.lineWidth=10;
x.lineTo(200,10);
x.stroke();
</script>

Теперь с помощью свойства lineCap мы добавили кончики к линии:

Пример

<canvas id='draw' style='border:1px solid' width='300' height='150'></canvas>
<script type='text/jаvascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.beginPath()
x.moveTo(10,30);
x.lineWidth=10;
x.lineCap='round';
x.lineTo(200,10);
x.stroke();
</script>

Теперь с помощью свойства lineJoin мы сгладили стыки линий:

Пример

<canvas id='draw' style='border:1px solid' width='300' height='150'></canvas>
<script type='text/jаvascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.beginPath()
x.moveTo(10,10);
x.lineWidth=15;
x.lineJoin='round';
x.lineTo(50,50);
x.lineTo(100,10);
x.lineTo(170,80);
x.lineTo(210,40);
x.stroke();
</script>

Градиент

Далее мы расскажем о применении градиентов, для этого используется метод createLinearGradient(x1,y1,x2,y2) он предназначен для линейного градиента. Параметры x1 и y1 устанавливают координаты начальной, а x2 и y2 конечной точки градиента.
addColorStop(точка,цвет) – указывает цвета перехода.

На примере ниже чёрный цвет плавно переходит в белый:

<canvas id='draw' style='border:1px solid' width='300' height='200'></canvas>
<script type='text/jаvascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
var grad = x.createLinearGradient(0,0,0,150);
grad.addColorStop(0.0,'black');
grad.addColorStop(1.0,'white');
x.fillStyle=grad;
x.fillRect(20,20,200,200);
</script>

Но можно создавать и более сложные градиенты, которые будут изменять цвет в разных точках фигуры:

<canvas id='draw' style='border:1px solid' width='300' height='200'></canvas>
<script type='text/jаvascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
var grad = x.createLinearGradient(50,50,150,150);
grad.addColorStop(0.0,'#d2006b');//Розовый цвет в начале
grad.addColorStop(0.5,'#00a779');//Бирюзовый цвет в середине
grad.addColorStop(1.0,'#ffe800');//Желтый цвет в конце
x.fillStyle=grad;
x.fillRect(20,20,190,150);
</script>

Использование теней

- shadowOffsetX – Смещает тень по горизонтали (может имеь отрицательные значения).

- shadowOffsetY – Смещает тень по вертикали (может иметь отрицательные значения).

- shadowBlur – Устанавливает величину размытия тени.

- shadowColor – Устанавливает цвет тени, если не использовать тень будет чёрной.

Пример:

<canvas id='draw' style='border:1px solid' width='300' height='150'></canvas>
<script type='text/jаvascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
x.shadowOffsetX=3;
x.shadowOffsetY=3;
x.shadowBlur=5;
x.shadowColor='black';
x.fillStyle='#ffaa00';
x.fillRect(50,40,55,55);
</script>

На этом закончили, попробуйте поэкспериментировать сами.


Все статьи по теме HTML 5:

- HTML 5 Введение
- Устаревшие теги и атрибуты HTML 5
- Нововведения в структуру документа HTML 5
- Глобальные атрибуты в HTML 5
- Формы HTML 5
- Воспроизведение аудио файлов в HTML 5
- Воспроизведение видео файлов в HTML 5
- Web worker
- Геолокация в HTML 5
- Drag and Drop
- Кэширование страниц
- Макет шаблона HTML 5 с пояснениями
- Справочник тегов HTML 5

Canvas:

- Canvas вступление
- Применение стилей в canvas
- Оформление текста и изображений в canvas