Рисуем волны с Canvas или привет html 5

Canvas — элемент HTML 5, предназначенный для создания изображений при помощи JavaScript.
Приведу весь код целиком:

<html>
<head> <style> body { margin: 0; } h1 { position: absolute; bottom: 10px; left: 10px; margin: 0; color: #FFF; z-index: 10; font-family: Helvetica, sans-serif; } #canvas { background-color:#FAFAFA; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <h1>Waves</h1> <canvas id="canvas" width="400" height="400"></canvas>

<script type='text/javascript'>
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var waves = ["rgba(157, 187, 210, 0.3)", "rgba(171, 216, 201, 0.3)",
"rgba(135, 199, 215, 0.3)",
"rgba(223, 233, 235, 0.3)"] var i = 0; function draw() {
canvas.width = canvas.width; for(var j = waves.length - 1; j >= 0; j--) { var offset = i + j * Math.PI * 12; ctx.fillStyle = (waves[j]); var randomLeft = (Math.sin(offset/100) + 1) / 2 * 200;
var randomRight = (Math.sin((offset/100) + 10) + 1) / 2 * 200;
var randomLeftConstraint = (Math.sin((offset/60) + 2) + 1) / 2 * 200; var randomRightConstraint = (Math.sin((offset/60) + 1) + 1) / 2 * 200;

ctx.beginPath(); ctx.moveTo(0, randomLeft + 100); // ctx.lineTo(canvas.width, randomRight + 100); ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight + 100);
ctx.lineTo(canvas.width , canvas.height); ctx.lineTo(0, canvas.height); ctx.lineTo(0, randomLeft + 100); ctx.closePath(); ctx.fill(); } i = i + 3; } setInterval("draw()", 20); </script> </body> </html>

Что это такое? Посмотреть можно тут.
Теперь поговорим о том да о сём.
Прежде всего мы определили основные необходимые html теги и их начальные свойства при помощи css. Думаю тут понятно! не будем заострятся..
Это элемент над которым будет работать наша программа:

<canvas id="canvas" width="400" height="400"></canvas>

После того как мы покончили с html разметкой, перейдём к JavaScript’у:
Старая функция выбора элемента страници по id:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

И сделаем ширину и высоту элемента равной ширине и высоте окна:

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Определяем массив с цветами волн:

var waves = ["rgba(157, 187, 210, 0.3)", "rgba(171, 216, 201, 0.3)", "rgba(135, 199, 215, 0.3)", "rgba(223, 233, 235, 0.3)"]

После этого переходим к функции drow(), которая и будет создавать эффект движения волн.
Стираем предыдущую волну:

canvas.width = canvas.width;

За тем в цикле происходят необходимые для схожести с природой изменения волн. Переменная offset служит для задания разности амплитуд волн. Как вы уже поняли наши волны — синусоиды 😉 Её вычисляют такой сложной формулой для придания случайности волнам:

var offset = i + j * Math.PI * 12;

При каждом проходе необходимо изменить цвет соответствующей волны:

ctx.fillStyle = (waves[j]);

Эти строки определяют величины сдвига и искажения волн:

var randomLeft = (Math.sin(offset/100)  + 1)  / 2 * 200;
var randomRight = (Math.sin((offset/100) + 10) + 1) / 2 * 200;
var randomLeftConstraint  = (Math.sin((offset/60)  + 2)  + 1) / 2 * 200;
var randomRightConstraint = (Math.sin((offset/60)  + 1)  + 1) / 2 * 200;

Не буду останавливаться на формулах. Думаю вы понимаете, что они оприделены так для красоты создаваемого эффекта и для каждого проекта разные.
Начинаем рисовать:

ctx.beginPath();

Перейдём в начальную точку рисования:

ctx.moveTo(0, randomLeft + 100);

Искажаем прямую:

ctx.bezierCurveTo(canvas.width / 3, randomLeftConstraint, canvas.width / 3 * 2, randomRightConstraint, canvas.width, randomRight + 100);

Отрисовываем ломаную через 3 точки:

ctx.lineTo(canvas.width , canvas.height);
ctx.lineTo(0, canvas.height);
ctx.lineTo(0, randomLeft + 100);

Прекращаем рисование:

ctx.closePath();
ctx.fill();

Ну и запускаем с интервалом 20 мс:

setInterval("draw()", 20);

 

Похожий код:

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

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

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

  1. lamazavr

    крут. просто и сердито

    Ответить
  2. Алекс

    Почему-то окошко с стрелкой вверх наезжает на основной текст (съедает один символ)

    Ответить