Градиенты Canvas
Градиент, как правило, представляет собой цветовую схему, плавно переходящую от одного цвета к другому. Градиенты в HTML5 Canvas используются для заливки кругов, прямоугольников, линий, текста и т. д., при этом фигуры на холсте не ограничиваются сплошными цветами.
Существует два типа градиентов:
- createLinearGradient(x,y,x1,y1) — для создания линейного градиента
- createRadialGradient(x,y,r,x1,y1,r1) — для создания радиального градиента
Получив объект градиента, добавьте два или более цветовых перехода. Для задания цветовых переходов и их положения вдоль градиента используется метод addColorStop(). Позиции градиента могут находиться в диапазоне от 0 до 1.
Затем установите свойство fillStyle или strokeStyle равным градиенту и нарисуйте фигуру.
Линейный градиент
Линейный градиент изменяет цвет по линейному шаблону, определяя направление градиента (горизонтальное, вертикальное или диагональное). Четыре параметра этой функции (x,y,x1,y1) определяют направление и протяжённость градиента. Примечание: координаты Canvas начинаются с (0,0) в левом верхнем углу, при этом x увеличивается вправо, а y — вниз.
Пример линейного градиента с использованием fillStyle:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="150">
Your browser doesn't support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "green");
grd.addColorStop(1, "whitesmoke");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 260, 110);
</script>
</body>
</html>Пример линейного градиента с использованием fillStyle с разными цветами:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 2px solid #202131;
}
</style>
</head>
<body>
<canvas id="exampleCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('exampleCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, 500, 200);
var linear = context.createLinearGradient(0, 0, 500, 200);
linear.addColorStop(0, '#297979');
linear.addColorStop(1, '#2ee035');
context.fillStyle = linear;
context.fill();
</script>
</body>
</html>Пример линейного градиента с использованием fillStyle и strokeStyle:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 5px solid #cccccc;
}
</style>
<script>
function drawShape() {
var canvas = document.getElementById('canvasGradient');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var lgrad1 = ctx.createLinearGradient(0, 0, 0, 300);
lgrad1.addColorStop(0, 'blue');
lgrad1.addColorStop(0.4, 'lightpink');
lgrad1.addColorStop(0.5, 'purple');
lgrad1.addColorStop(1, 'lightsalmon');
var lgrad2 = ctx.createLinearGradient(0, 50, 0, 150);
lgrad2.addColorStop(0, '#7afff3');
lgrad2.addColorStop(0.5, '#191918');
lgrad2.addColorStop(1, '#7afff3');
ctx.fillStyle = lgrad1;
ctx.strokeStyle = lgrad2;
ctx.fillRect(15, 15, 120, 120);
ctx.strokeRect(100, 50, 100, 50);
} else {
alert('Your browser does not support');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="canvasGradient" width="300" height="300"></canvas>
</body>
</html>Радиальный градиент
Радиальный градиент изменяет цвет по круговой схеме. Он может быть создан с помощью двух заданных окружностей. Иными словами, радиальный градиент — это цветовая схема, расширяющаяся по кругу от внутреннего цвета к одному или нескольким другим. Это реализуется с помощью двух окружностей, каждая из которых должна иметь центральную точку и радиус.
Пример радиального градиента:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 2px solid #cccccc;
}
</style>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="150">
Your browser doesn't support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(155, 80, 20, 130, 40, 190);
grd.addColorStop(0, "#14389c");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(15, 15, 270, 120);
</script>
</body>
</html>Практика
Какие из этих методов используются для применения цветов, узоров и градиентов к фигурам на холсте HTML5?