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);
крут. просто и сердито
Почему-то окошко с стрелкой вверх наезжает на основной текст (съедает один символ)