В этой статье рассмотрим ещё один способ создать градиент на 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);
Всё готово 😉 Вот так получилось у меня.
