JavaScript. Подробное руководство, 6-е издание, стр. 371

function hitpath(context, event) {

 // Получить элемент <canvas> из объекта контекста

 var canvas = context.canvas;

 // Получить координаты и размеры холста

 var bb = canvas.getBoundingClientRect();

<b>  // Преобразовать и масштабировать координаты события мыши в координаты холста</b>

 var х = (event.clientX-bb.left)*(canvas.width/bb.width);

 var у = (event.clientY-bb.top)*(canvas.height/bb.height);

 // Вызвать isPointlnPath с преобразованными координатами

 return context.isPointInPath(x,y);

}

Эту функцию

hitpath()

можно использовать в обработчиках событий, как показано ниже:

canvas.onclick = function(event) {

 if (hitpath(this.getContext("2d"), event) {

<b>    alert(&quot;Ecть попадание!&quot;); // Щелчок в пределах текущего контура</b>

 }

};

Вместо проверки попадания в текущий контур с помощью метода

getlmageData()

можно определить, окрашен ли пиксел в точке события мыши. Если пиксел (или пикселы) под указателем мыши оказался полностью прозрачным, следовательно, под указателем мыши ничего не было нарисовано и щелчок был выполнен за пределами какой-либо фигуры. Пример 21.12 демонстрирует, как реализовать подобную проверку попадания.

Пример 21.12. Проверка наличия окрашенного пиксела в точке события мыши

<b>// Возвращает true, если указанное событие мыши возникло в точке,</b>

// где находится непрозрачный пиксел,

function hitpaint(context, event) {

<b>  // Преобразовать и масштабировать координаты события мыши в координаты холста</b>

 var canvas = context.canvas;

 var bb = canvas.getBoundingClientRect();

 var x = (event.clientX-bb.left)*(canvas.width/bb.width);

 var у = (event.clientY-bb.top)*(canvas.height/bb.height);

<b>  // Получить пиксел (или пикселы, если одному CSS-пикселу соответствует</b>

 // несколько аппаратных пикселов)

 var pixels = с.getImageData(x,у,1,1);

<b>  // Если хотя бы один пиксел имеет ненулевое значение альфа-канала,</b>

 // вернуть true (попадание)

 for(var і = 3; і < pixels.data.length; i+=4) {

 if (pixels.data[i] !== 0) return true;

 }

 // Иначе это был промах, return false;

}

21.4.16. Пример использования элемента <canvas>: внутристрочные диаграммы

Закончим главу практическим примером рисования внутристрочных диаграмм. Внутристрочная диаграмма (sparkline) - это маленькое изображение (обычно некий график) предназначенное для отображения в потоке текста, например: Server load: 8. Термин «sparkline» был введен их автором Эдвардом Тафти (Edward Tufte), который описывает внутристрочные диаграммы так: «Маленькие графические изображения с высоким разрешением, встроенные в контекст окружающих их слов, чисел, изображений. Внутристрочная диаграмма -это простой в создании, тесно связанный с данными график, размер которого сопоставим с размером слова». (Подробнее о создании внутристрочных диаграмм см. в книге Эдварда Тафти «Beautiful Evidence» [Graphics Press].)

В примере 21.13 приводится относительно простой модуль на языке JavaScript, позволяющий вставлять в веб-страницы внутристрочные диаграммы. Порядок работы модуля описывается в комментариях. Обратите внимание, что в нем используется функция

onLoad()

из примера 13.5.

Пример 21.13. Реализация внутристрочных диаграмм с помощью элемента

<canvas>

/*

<b>* Отыскивает все элементы с CSS-классом &quot;sparkline&quot;, анализирует их содержимое</b>

<b>* как последовательность чисел и замещает их графическим представлением.</b>

*

* Определить внутристрочную диаграмму в разметке можно так:

* 3 5 7 6 6 9 11 15

*

<b>* Определить визуальное оформление диаграмм средствами CSS можно так:</b>

* .sparkline { background-color: #ddd; color: red; }

*

<b>* - Цвет кривой графика определяется CSS-свойством color вычисленного стиля.</b>

<b>* - Сами диаграммы являются прозрачными, поэтому сквозь них просвечивает фон страницы.</b>

<b>* - Высота диаграммы определяется атрибутом data-height, если он указан,</b>

* или свойством font-size вычисленного стиля в противном случае.

<b>* - Ширина диаграммы определяется атрибутом data-width, если он указан,</b>