Рисуем волны с 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);
Просмотров:   4751

Комментарии

чт, 11/22/2012 - 14:10

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

чт, 05/15/2014 - 13:06
Алекс

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

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
CAPTCHA
Введи эти символы. Ато роботы одолели!