Градиент средствами HTML 5 Canvas

В этой статье рассмотрим ещё один способ создать градиент на html странице — создадим градиент при помощи html 5 Canvas

доктайп, заголовок и стили для блока с градиентом:

<!DOCTYPE html>

<title>gradient fills</title>

<style>

body { font-family: sans-serif; }

canvas { margin: 50px auto 0; display: block; border: 1px solid #ccc;}

p { text-align: center; }

</style>

Поле для рисования canvas :

<canvas></canvas>

Ну а теперь скрипт для управления всем этим добром:

<script>

var canvas = document.querySelector(‘canvas’),

    ctx = canvas.getContext(‘2d’);

var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);

gradient.addColorStop(0, ‘#fff’);

gradient.addColorStop(1, ‘#000’);

ctx.fillStyle = gradient;

ctx.fillRect(0, 0, canvas.width, canvas.width);

</script>

При помощи двух первых строк выбираем canvas элемент со страници для рисования. Это обязательные строки для любого canvas приложения.
Затем создаём линейный градиент:

var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);

Параметры — координаты (откуда куда идёт градиент)
Затем добавляем «точки остановки». Указываем позицию (от 0 до 1) и цвет.

gradient.addColorStop(0, ‘#fff’);

Затем заливаем наш блок созданным градиентом:

ctx.fillStyle = gradient;

ctx.fillRect(0, 0, canvas.width, canvas.width);

Всё готово 😉 Вот так получилось у меня.

 

Похожий код:

Фото аватара
Алексей Петров

Программист, разработчик с 5 летним опытом работы. Учусь на разработчика игр на Unity и разработчика VR&AR реальности (виртуальной реальности). Основные языки программирования: C#, C++.

Оцените автора
Бла, бла код
Добавить комментарий