Digital Nox

Сначала создаем <div> с вашим идентификатором и размерами и подключим библиотеку. Также лучше указать размеры блока с графиком в стилях: #zedamin{ width: 400px; height: 400px; } </style> <div id='zedamin'></div> <!-- если Internet Explorer, то подключаем flashcanvas --> <!--[if IE]> <script type="text/javascript" src=" http://www.humblesof.../flashcanvas.js"></script> <![endif]--> <script type="text/javascript" src=" http://www.humblesof...s/flotr2.min.js"></script> Здесь мы задали размер 400×400 для контейнера с идентификатором zedamin и подключили библиотеку flotr2, если браузер Internet Explorer подключаем flashcanvas, чтобы в нем тоже все работало. Чтобы нарисовать график, нужно воспользоваться методом Flotr.draw(container, data, options). Параметры метода : container — это контейнер <div> data — это массив с данными графика options — это объект, содержаий настройки для определения осей по x и y, сеток, меток и т.д. Все, что нам нужно, это создать переменные для этих параметров и определить в них то, что нам нужно. //наш контейнер container = document.getElementById("zedamin"), //массивы с данными диаграммы: 58, 41, 1 - это проценты для каждого сектора ios = [[0, 58]], android = [[0, 41]], blackBerry = [[0, 1]], //передаем массивы и связываем секторы диаграммы с метками data = [ { data : ios, label : 'iOS' }, { data : android, label : 'Android' }, { data : blackBerry, label : 'BlackBerry', pie : { explode : 50 //выделяем сектор blackBerry } }, ], //выделяем сектор blackBerry options = { HtmlText : false,//true - рисуем текст с помощью HTML, false - рисуем с помощью Canvas API grid : { //вертикальные и горизонтальные линии (false - скрыть) verticalLines : false, horizontalLines : false }, //оси x и y (false - скрыть) xaxis : { showLabels : false }, yaxis : { showLabels : false }, pie : { show : true, explode : 6 }, //true - график воспринимает мышь, false - игнорирует mouse : { track : true }, legend : { //положение меток south-east или юго-восток (правый нижний угол контейнера) position : 'se', //фон группы меток backgroundColor : '#D2E8FF' } }; Flotr.draw(container, data, options);//вызываем метод и передаем параметры

Небольшая демонстрация на GitHub, показывающая, как можно добавить маску на изображение с помощью HTML5. http://zedamin.com/w...13/06/masks.jpg [Изображение заблокировано. Пожалуйста, загрузите картинку на наш форум: http://forummaxi.ru/....php?app=ihost.] Все, что вам нужно сделать, это добавить скрипт canvasmask.js (скачайте его по ссылке ниже) и добавить класс mask к каждому изображению, которому хотите задать маску. Кроме того, необходимо указать пут PNG-файла маски для аттрибита data-mask. Например: alt="Red panda" class="mask" data-mask="centerblur.png"> В этом примере картинка centerblur.png это маска для файла red-panda.jpg — принцип прост: берется альфа пиксель от маски и заменяется на альфа пиксель от оригинальной картинки. Смотрите, как это работает: http://codepo8.githu...canvas-masking/ (не реклама) Получить код

Интернет стремительно развиваеться, число сайтов растет в геометрической прогрессии, все болльше людей хотят научиться создавать сайты, и стать веб мастерами. Но в каждом деле нужен системный подход, начав создавать уроки CSS 3 и HTML5, мы забежали немножко вперед, забыв про ту часть людей которые только, только начали изучать SS 3 и HTML5. Поэтому сегодня у нас будет Урок №1| С чего начать? Уроки CSS 3 и HTML 5 с нуля Урок №1| С чего начать? Для начала изучения CSS 3 и HTML5, нужно сделать следующее: 1) Создать новую папку, и переименовать ее например на Test, название значения не имеет. 2) Создать в паке Test »новая папка» и переименовать ее в Images 3) Создать в паке Test »новая папка» и переименовать ее в CSS 3) Создать два новых текстовых документа, это обычные фаилы блокнота, с расширение «.txt».У вас должно получиться два файла: »Новый текстовый документ.txt» и «Новый текстовый документ(2)».txt 4) Переименовать Новый текстовый документ.txt в index.html 5) Переименовать Новый текстовый документ(2).txt в styles.css 6) Переместить styles.css в папку CSS Теперь у нас есть все, что нужно для начала обучения CSS 3 и HTML5, кроме редактора, лично я использовал разные редакторы, но остановился на Dreamweaver CS5.5, но так как это платная програма, рекомендую еще отличную бесплатною программу Notepad++. Итак начнем, нам у нас есть index.html, это главная страница, у нас есть папка CSS, с файлом styles.css, в этом файле будут стили css. Для начала нам нужно создать начальную структуру в index.html, для этого открываем его редактором (этот файл можно открыть любым текстовым редактором начиная с блокнота, но специальные редакторы подсвечивают теги что существенно облегчает работу) наберите в свой index.html мой код, можно без коментариев, они для понимания, код вы найдете ниже. Коментарии задаються в вот таком символе < !—коментарии —>(без пробела) писать их не обязательно, это как подсказки. создаем index.html и подключаем style.css Так как мы не просто создали html страницу, а еще и подключили к ней стиль, давайте что нибудь в нем напишем. Итак, окройте файл styles.css и скопируйте туда два стиля, которые приведены ниже, коментарии подсказки в комплекте, обратите внимание что CSS коментарии задаются иначе чем в html, вот так /*коментарий*/ И так из этого Вы урока вы научились создавать html страницу в новом стандарте HTML 5, подключать к ней стиль. Также в папке Demo создана необхомая структура которая пригодиться Вам для дальнейшего освоения CSS 3 и HTML5. Каждому, новичку важно запомнить, что CSS стиль писать нужно только в styles.css, не стоит прописывать стиле в index.html. Ну что ж, на этом Урок №1 по изучения CSS 3 и HTML5, можно считать завершенным!