Рисование с помощью HTML5 Canvas

Canvas является одной из самых забавных особенностей HTML5. «Количество классных вещей, которые могут быть созданы очень велико. Тем не менее, многие люди считают, что его трудно изучать. Но, правда говоря, это не так», говорит разработчик Рафаэль Аморим. «Конечно, уметь создавать сложные интересные вещи важно, но если вы не знаете как — начнем с создания простого». Он показывает пример ниже:

Создайте простую структуру и добавьте тег canvas с любым id в вашем HTML-файле. В этой статье, имя id будет «particles». Перед закрытием тела тега, вызовите файл JavaScript, который называется “particles.js”.

<canvas id="particles"></canvas>
<script src="particles.js" type="text/javascript"></script>

И так, начнем волшебство Canvas в particles.js! Я объясню код по частям для лучшего понимания — код доступен на GitHub. Во-первых, нужно добавить функцию с событием OnLoad и указать тело страницы и тег canvas. Здесь же применяем некоторые стили к элементам. Обратите внимание, что мы не создавали ни одного файла CSS. Устанавливаем стили в JavaScript, но вы можете сделать это так, как посчитаете нужным. Мы также добавим функцию обновления, которая будет работать в определенном диапазоне.

window.onload = function() {
    var body = document.querySelector(‘body’);
    body.style.background = ‘#2C2C44';

    canvas = document.getElementById(‘particles’),
    ctx = canvas.getContext(‘2d’);

    body.style.margin = ‘0px’;
    canvas.style.margin = ‘0px’;
    canvas.style.padding = ‘0px’;

    canvas.width = canvas_width;
    canvas.height = canvas_height;
    draw = setInterval(update, speed);
}

После этого мы определяем некоторые переменные, такие как скорость событий и размер холста canvas. Хотя и не хорошо использовать глобальные переменные, но в этом эксперименте это оправдано в учебных целях. Здесь не используется requestAnimationFrame, но я рекомендую в нем разобраться. С его помощью браузер может оптимизировать одновременно анимации в одном потоке и снова собрать весь цикл, что приведет к большей точности анимации. Например, он очень хорошо поможет для снхронизации анимации с помощью CSS или SVG SMIL переходов.

Браузер не будет отрабатывать анимации на основе Javascript, где цикл анимации выполняется на вкладке которая не видна, что меньше нагружает CPU, GPU и память. Эта ссылка хороший источником для изучения requestAnimationFrame.

// Settings
var speed = 35,
canvas_width = window.innerWidth,
canvas_height = window.innerHeight

Здесь определяем другие глобальные переменные которые задают частицы на холсте canvas, диапазон в которых они будут созданы, количество частиц, список созданых и цвета. Опять же, не рекомендуется использование глобальных переменных, вычислительные затраты, как правило, довольно высоки и приложение становится менее организованным. Один из немногих случаев, когда применение глобальных переменных оправдано — когда данные постоянны.

var canvas,
ctx,
times = 0,
limit = 100,
draw,
particles = [],
colors = [‘#F0FD36', ‘#F49FF1', ‘#F53EAC’, ‘#76FBFA’];

Если мы создаем что-то, что нуждается в хаотичность в положение, размер и цвет частицы, то почему бы не использовать функцию?

var getRand = function(type) {
    if (type === ‘size’)
        return (Math.floor(Math.random() * 8) * 10)

    if (type === ‘color’)
        return Math.floor(Math.random() * colors.length)

    if (type === ‘pos’)
        return [
            (Math.floor(Math.random() * 200) * 10),
            (Math.floor(Math.random() * 80) * 10)
        ]
    return false
};

Хорошо, теперь давайте создадим обобщенную функцию для создания частиц, используя в качестве основы входящие аргументы.

var drawParticle = function(x, y, size, color, opacity){
    ctx.beginPath();
    ctx.globalAlpha = opacity;
    ctx.arc(x, y, size, 0, 2 * Math.PI);

    ctx.fillStyle = color;
    ctx.fill();

    ctx.strokeStyle = color;
    ctx.stroke();
}

Помните функцию update? Которая использовалась для запуска в setInterval внутри загруженной функции в окне событий OnLoad? В такой функции происходит «волшебный рисунок» частиц, помимо контроля предела частиц. Следует отметить, что для каждой разработанной частицы сохраняется объект с индивидуальной информацией о ней в списке частиц.

function update(args) {
    var color = colors[getRand(‘color’)],
    pos = getRand(‘pos’),
    size = getRand(‘size’),
    opacity = 1;
    drawParticle(pos[0], pos[1], size, color, opacity)
    times++;

    particles.push([pos[0], pos[1], color, opacity, size]);
    if (times >= limit) {
        clearInterval(draw);
        draw = setInterval(clean, speed);
    }
}

Сейчас скрипт создает определенное количество частиц на экране, после он останавливается. Существует функция с именем clean, которая выполняется, когда частицы достигнут предела. Она выполняет чтение каждой частицы и задаст ей прозрачность «0», все работает в определенном промежутке времени. Таким образому получим эффект fadeOut.

function clean() {
   ctx.clearRect(0, 0, canvas_width, canvas_height);

   particles.forEach(function(p) {
      /*
      p[0] = x,
      p[1] = y,
      p[2] = color
      p[3] = globalAlpha,
      p[4] = size
      */

      p[3] = p[3] — 0.06;

      drawParticle(p[0], p[1], p[4], p[2], p[3])

      if (p[p.length — 1] && p[3] <= 0.0) {
         ctx.clearRect(0, 0, canvas_width, canvas_height);
         clearInterval(draw);
         times = 0;
         particles = []
         draw = setInterval(update, speed);
      }

   });
}

Теперь вы можете запустить эксперимент в вашем браузере.

Источник: iMasters

canvas, frontend, HTML