Нарисованные с помощью canvas объекты можно оформлять.
ТвитнутьДля раскрашивания нарисованных в canvas фигур предусмотрены свойства: fillStyle и strokeStyle.
Свойство fillStyle используется для применения цвета к закрашенным, а strokeStyle для применения цвета к не закрашенным фигурам.
Пример
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);
Как видно из предыдущего примера цвета могут задаваться таким же способом как в CSS.
Помимо этих способов в canvas цвет может задавать с помощью rgba (задается цвет и прозрачность элемента).
Пример
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);
В HTML5 имеются несколько свойств для оформления линий нарисованных с помощью метода lineTo(): lineWidth, lineCap, lineJoin.
С помощью свойства lineWidth Вы можете установить ширину линии (по умолчанию линии имеют ширину 1 пиксель).
Пример
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
//Рисуем линию толщиной 3 пикселя
x.beginPath()
x.moveTo(10,10);
x.lineWidth=3;
x.lineTo(200,10);
x.stroke();
С помощью свойства lineCap Вы можете оформлять кончики линии.
Пример
//Нарисуем линию с круглым кончиком x.beginPath() x.moveTo(10,10); x.lineWidth=10; x.lineCap='round'; x.lineTo(200,10); x.stroke();
С помощью свойства lineJoin Вы можете сглаживать стыки двух линий.
Пример
//Сгладим стыки линий 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();
С помощью метода createLinearGradient(x1,y1,x2,y2) Вы можете создать линейный градиент. Параметры x1 и y1 устанавливают координаты начальной, а x2 и y2 конечной точки градиента.
После того, как градиент создан необходимо указать цвета перехода. Это можно сделать с помощью метода addColorStop(точка,цвет).
Например если Вы хотите создать градиент, который плавно изменяет цвет с черного на белый необходимо установить черный цвет в точке 0 (начальная точка градиента) и белый цвет в точке 1 (конечная точка градиента).
Пример
<canvas id='draw' width='240' height='200' style='border:1px solid;'></canvas>
<script>
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' width='240' height='200' style='border:1px solid;'></canvas>
<script>
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 | Цвет тени (по умолчанию черный). |
Пример
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);