Выразительный JavaScript (Хавербеке) - страница 173
> 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();
> });
>
Но диаграмма не расшифровывает значения секторов – это неудобно. Нам надо как-то нарисовать на холсте текст.
Текст
У контекста двумерного холста есть методы >fillText и >strokeText. Последний можно использовать для обведённых букв, но обычно используется >fillText. Он заполняет заданный текст цветом >fillColor.
>
>
Можно задать размер, стиль и шрифт текста через свойство >font. В примере задаётся только размер и шрифт. Можно добавить наклон и жирность в начале строки.
Два последних аргумента >fillText (и >strokeText) задают позицию, с которой начинается текст. По умолчанию это начало линии, на которой «стоят» буквы – не считая свисающих частей букв типа р и у. Можно менять позицию по горизонтали, задавая свойству >textAlign значения >"end" или >"center", а по вертикали – задавая >textBaseline>"top", >"middle", или >"bottom".
В конце главы мы вернёмся к нашей диаграмме.
Изображения
В компьютерной графике проводится различие между векторной и растровой графикой. Первая – то, чем мы занимались в этой главе, рисование при помощи логических описаний форм. Вторая – не задаёт формы, а работает на уровне пикселей.
Метод >drawImage позволяет выводить на холст пиксельные данные. Они могут быть взяты из элемента > или с другого холста, которые не обязательно видны в самом документе. Следующий пример создаёт элемент > и загружает в него файл изображения. Но он не может сразу начать рисовать при помощи этой картинки, потому что браузер мог не успеть её подгрузить. Для этого мы регистрируем обработчик события >“load” и рисуем после загрузки.
>
>