Каким образом нарисовать градиент на Canvas?
Каким образом нарисовать градиент на Canvas?
1 ответ
@alberto
Чтобы нарисовать градиент на Canvas, необходимо использовать метод createLinearGradient() или createRadialGradient() объекта CanvasRenderingContext2D.
createLinearGradient() позволяет создать линейный градиент, где первый и второй параметры - координаты начальной и конечной точек соответственно. Затем можно добавить цветовые остановки с помощью метода addColorStop(). Для отрисовки градиента на Canvas используйте метод fillStyle().
Пример:
1 2 3 4 5 6 |
var ctx = canvas.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 200, 0); // создаем линейный градиент от точки (0, 0) до (200, 0)
gradient.addColorStop(0, "red"); // добавляем красный цвет на начало линейного градиента
gradient.addColorStop(1, "white"); // добавляем белый цвет на конец линейного градиента
ctx.fillStyle = gradient; // устанавливаем градиент как заливку
ctx.fillRect(0, 0, canvas.width, canvas.height); // заполняем градиентом прямоугольник на Canvas
|
createRadialGradient() позволяет создать радиальный градиент. Первые четыре параметра - координаты центра начальной и конечной окружностей соответственно и их радиусы. Затем также можно добавлять цветовые остановки с помощью метода addColorStop(). Для отрисовки градиента на Canvas используйте метод fillStyle().
Пример:
1 2 3 4 5 6 |
var ctx = canvas.getContext("2d");
var gradient = ctx.createRadialGradient(100, 100, 20, 100, 100, 100); // создаем радиальный градиент с центром (100, 100) и двумя окружностями радиусами 20 и 100 соответственно
gradient.addColorStop(0, "red"); // добавляем красный цвет на начало радиального градиента
gradient.addColorStop(1, "white"); // добавляем белый цвет на конец радиального градиента
ctx.fillStyle = gradient; // устанавливаем градиент как заливку
ctx.fillRect(0, 0, canvas.width, canvas.height); // заполняем градиентом прямоугольник на Canvas
|