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

Здесь есть возможность читать онлайн «Марейн Хавербеке - Выразительный JavaScript» весь текст электронной книги совершенно бесплатно (целиком полную версию без сокращений). В некоторых случаях можно слушать аудио, скачать через торрент в формате fb2 и присутствует краткое содержание. ISBN: , Жанр: Программирование, на русском языке. Описание произведения, (предисловие) а так же отзывы посетителей доступны на портале библиотеки ЛибКат.

Выразительный JavaScript: краткое содержание, описание и аннотация

Предлагаем к чтению аннотацию, описание, краткое содержание или предисловие (зависит от того, что написал сам автор книги «Выразительный JavaScript»). Если вы не нашли необходимую информацию о книге — напишите в комментариях, мы постараемся отыскать её.

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

Выразительный JavaScript — читать онлайн бесплатно полную книгу (весь текст) целиком

Ниже представлен текст книги, разбитый по страницам. Система сохранения места последней прочитанной страницы, позволяет с удобством читать онлайн бесплатно книгу «Выразительный JavaScript», без необходимости каждый раз заново искать на чём Вы остановились. Поставьте закладку, и сможете в любой момент перейти на страницу, на которой закончили чтение.

Тёмная тема
Сбросить

Интервал:

Закладка:

Сделать

Представьте, что вы получили работу в ООО «Экономика для всех», и вашим первым заданием будет нарисовать круговую диаграмму удовлетворённости клиентов согласно результатам опроса.

Переменная resultсодержит массив объектов, представляющих результаты.

var results = [

{name: "Удовлетворён", count: 1043, color: "lightblue"},

{name: "Нейтральное", count: 563, color: "lightgreen"},

{name: "Не удовлетворён", count: 510, color: "pink"},

{name: "Без комментариев", count: 175, color: "silver"}

];

Чтобы нарисовать диаграмму, мы рисуем несколько секторов, каждый из которых делается из арки и пары линий от центра. Угол мы вычисляем, деля полный круг (2π) на общее количество отзывов, и умножая на количество людей, выбравших данный вариант ответа.

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.

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

cx.font = "28px Georgia";

cx.fillStyle = "fuchsia";

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

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

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

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

Изображения

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

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

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);

});

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

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

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

Выразительный JavaScript - фото 29
Тёмная тема
Сбросить

Интервал:

Закладка:

Сделать

Похожие книги на «Выразительный JavaScript»

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


Отзывы о книге «Выразительный JavaScript»

Обсуждение, отзывы о книге «Выразительный JavaScript» и просто собственные мнения читателей. Оставьте ваши комментарии, напишите, что Вы думаете о произведении, его смысле или главных героях. Укажите что конкретно понравилось, а что нет, и почему Вы так считаете.

x