Выразительный JavaScript - Марейн Хавербеке

<canvas width="200" height="200"></canvas>

<script>

  var cx = document.querySelector("canvas").getContext("2d");

  var total = results.reduce(function(sum, choice) {

    return sum + choice.count;

  }, 0);

  // Start at the top

  var currentAngle = -0.5 * Math.PI;

  results.forEach(function(result) {

    var sliceAngle = (result.count / total) * 2 * Math.PI;

    cx.beginPath();

    // center=100,100, radius=100

    // from current angle, clockwise by slice's angle

    cx.arc(100, 100, 100,

           currentAngle, currentAngle + sliceAngle);

    currentAngle += sliceAngle;

    cx.lineTo(100, 100);

    cx.fillStyle = result.color;

    cx.fill();

  });

</script>

Но диаграмма не расшифровывает значения секторов – это неудобно. Нам надо как-то нарисовать на холсте текст.

Текст

У контекста двумерного холста есть методы fillText и strokeText. Последний можно использовать для обведённых букв, но обычно используется fillText. Он заполняет заданный текст цветом fillColor.

<canvas></canvas>

<script>

  var cx = document.querySelector("canvas").getContext("2d");

  cx.font = "28px Georgia";

  cx.fillStyle = "fuchsia";

  cx.fillText("Я и текст могу рисовать!", 10, 50);

</script>

Можно задать размер, стиль и шрифт текста через свойство font. В примере задаётся только размер и шрифт. Можно добавить наклон и жирность в начале строки.

Два последних аргумента fillText (и strokeText) задают позицию, с которой начинается текст. По умолчанию это начало линии, на которой «стоят» буквы – не считая свисающих частей букв типа р и у. Можно менять позицию по горизонтали, задавая свойству textAlign значения "end" или "center", а по вертикали – задавая textBaseline "top", "middle", или "bottom".

В конце главы мы вернёмся к нашей диаграмме.

Изображения

В компьютерной графике проводится различие между векторной и растровой графикой. Первая – то, чем мы занимались в этой главе, рисование при помощи логических описаний форм. Вторая – не задаёт формы, а работает на уровне пикселей.

Метод drawImage позволяет выводить на холст пиксельные данные. Они могут быть взяты из элемента <img> или с другого холста, которые не обязательно видны в самом документе. Следующий пример создаёт элемент <img> и загружает в него файл изображения. Но он не может сразу начать рисовать при помощи этой картинки, потому что браузер мог не успеть её подгрузить. Для этого мы регистрируем обработчик события “load” и рисуем после загрузки.

<canvas></canvas>

<script>

  var cx = document.querySelector("canvas").getContext("2d");

  var img = document.createElement("img");

  img.src = "img/hat.png";

  img.addEventListener("load", function() {

    for (var x = 10; x < 200; x += 30)

      cx.drawImage(img, x, 10);

  });

</script>

По умолчанию drawImage нарисует картинку оригинального размера. Ему можно задать два дополнительных параметра для изменения ширины и высоты.

Когда drawImage задано девять аргументов, её можно использовать для рисования части изображения. Со второго по пятый аргументы обозначают прямоугольник (x, y, ширина и высота) в исходной картинке, который надо скопировать. С шестого по девятый – прямоугольник на холсте, куда его надо скопировать.

Это можно использовать, чтобы упаковывать несколько спрайтов (элементов картинки или кадров анимации) в один файл изображения, и рисовать только нужные его части. К примеру, есть у нас картинка игрового персонажа в разных позах:

Перебирая позы, мы можем вывести анимацию идущего персонажа.

Для анимации на холсте пригодится метод clearRect. Он напоминает fillRect, но вместо окраски прямоугольника он делает его прозрачным, удаляя предыдущие пиксели.

Мы знаем, что каждый спрайт шириной 24 и высотой 30 пикселей. Следующий код загружает картинку и задаёт интервал для рисования следующих кадров:

<canvas></canvas>

<script>

  var cx = document.querySelector("canvas").getContext("2d");

  var img = document.createElement("img");

  img.src = "img/player.png";

  var spriteW = 24, spriteH = 30;

  img.addEventListener("load", function() {

    var cycle = 0;

    setInterval(function() {

      cx.clearRect(0, 0, spriteW, spriteH);

      cx.drawImage(img,

                   // source rectangle

                   cycle * spriteW, 0, spriteW, spriteH,

                   // destination rectangle

                   0,               0, spriteW, spriteH);

      cycle = (cycle + 1) % 8;

    }, 120);

  });

</script>

Переменная cycle отслеживает позицию в анимации. Каждый кадр она увеличивается и по достижению 7 начинает сначала, используя оператор деления с остатком. Она используется для подсчёта координаты x, на которой в изображении находится спрайт с нужной позой.

Преобразования

А что, если нам надо, чтобы персонаж шёл влево, а не вправо? Мы могли бы добавить ещё один набор спрайтов. Но мы также можем сказать холсту, чтоб он рисовал картинку зеркально.

Вызов метода scale приведёт к тому, что все последующие рисунки будут масштабированы. Он принимает два параметра – масштаб по горизонтали и по вертикали.

<canvas></canvas>

<script>

  var cx = document.querySelector("canvas").getContext("2d");

  cx.scale(3, .5);

  cx.beginPath();

  cx.arc(50, 50, 40, 0, 7);

  cx.lineWidth = 3;

  cx.stroke();

</script>

Масштабирование растягивает или сжимает все параметры картинки, включая ширину линии по заданным параметрам. Масштабирование с отрицательным параметром переворачивает картинку зеркально. Переворот происходит вокруг точки (0, 0), что означает, что направление системы координат тоже поменяется. При применении горизонтального масштаба -1, форма, нарисованная на позиции x = 100, будет нарисована там, где раньше была позиция -100.

Значит, для отзеркаливания картинки мы не можем просто добавить cx.scale(-1, 1) перед вызовом drawImage – наша картинка уедет с холста и не будет видна. Можно было бы подправить координаты, передаваемые в drawImage, чтобы компенсировать этот сдвиг. Другой вариант действий, когда код рисования ничего не знает про масштабирование, заключается в изменении направления оси.

Есть несколько других методов кроме масштабирования, влияющих на координатную систему холста. Нарисованные формы можно поворачивать методом rotate и сдвигать методом translate. Интересно, что все трансформации накапливаются, то есть каждая последующая происходит относительно предыдущих.

Значит, если мы дважды сдвинем изображение на 10 пикселей по горизонтали, то всё будет нарисовано на 20 пикселей правее. Если мы сначала сдвинем начало отсчёта на (50, 50), а затем повернём всё на 20 градусов (0,1π радиан), поворот произойдёт вокруг точки (50, 50).

А если мы сначала повернём всё на 20 градусов, а уже затем сдвинем на (50, 50), то преобразование случится в повёрнутой системе координат, что приведёт к иному результату. Порядок преобразований имеет значение.

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

function flipHorizontally(context, around) {

  context.translate(around, 0);

  context.scale(-1, 1);

  context.translate(-around, 0);

}

Мы сдвигаем ось Y туда, где нам нужно расположить наше зеркало, проводим отзеркаливание, и сдвигаем ось Y обратно на полагающееся место в зеркальной вселенной. Следующий рисунок объясняет, как это работает:

Тут показаны системы координат до и после отзеркаливания относительно центральной линии. Если мы нарисуем треугольник в положительной полуплоскости относительно Y, он будет находиться на месте треугольника 1. Вызов flipHorizontally сначала сдвигает его вправо, на место треугольника 2. Затем происходит масштабирование, и треугольник оказывается на месте 3. Он должен быть не там, если нам надо отзеркалить его относительно заданной линии. Второй вызов translate исправляет это – он «отменяет» изначальный сдвиг и помещает треугольник на позицию 4.

Теперь можно нарисовать отзеркаленного персонажа на позиции (100, 0), перевернув мир относительно вертикали изображения персонажа.

<canvas></canvas>

<script>

  var cx = document.querySelector("canvas").getContext("2d");

  var img = document.createElement("img");

  img.src = "img/player.png";

  var spriteW = 24, spriteH = 30;

  img.addEventListener("load", function() {

    flipHorizontally(cx, 100 + spriteW / 2);