Графика в WEB: различия между версиями
Нет описания правки |
|||
| (не показано 10 промежуточных версий 2 участников) | |||
| Строка 1: | Строка 1: | ||
== HTML-элемент Canvas == | |||
Новый HTML-элемент canvas позволяет программировать графику в браузере http://wiki.linuxformat.ru/index.php/LXF94:Графическое_web-приложение | Новый HTML-элемент canvas позволяет программировать графику в браузере http://wiki.linuxformat.ru/index.php/LXF94:Графическое_web-приложение | ||
Что такое Canvas http://www.linkexchanger.su/2009/86.html и как заставить его работать в IE | Что такое Canvas http://www.linkexchanger.su/2009/86.html и как заставить его работать в IE | ||
Здесь есть сравнение производительности canvas и SVG | |||
http://webo.in/articles/all/2009/23-using-canvas/ | |||
Про тег html canvas - 2 http://black-zorro.com/mediawiki/%D0%9F%D1%80%D0%BE_%D1%82%D0%B5%D0%B3_html_canvas_-_2 | |||
Здесь есть функция, очищающая canvas http://fastcoder.org/articles/?aid=181 | |||
== Графические JavaScript библиотеки == | |||
1. '''jsDraw2D''' : 2D Graphics Library for JavaScript (~66Кб) [http://jsdraw2d.jsfiction.com/]. Популярная кросс-браузерная библиотека 2D графики. Имеются все основные графические примитивы, такие как drawRectangle, drawCircle, drawEllipse и т.п. ''Поддерживает все современные веб-браузеры. Выполнение может отличаться в различных браузерах. Тестирована в IE 7, Mozilla Firefox 3, Google Chrome, Opera 9.64 и Safari 4 под Windows XP.'' | |||
2. JSXGraph — кросс-браузерная Javascript-библиотека для интерактивной геометрии, построения графиков функций и визуализации данных.[http://jsxgraph.uni-bayreuth.de/wp/examples/] или [http://www.linux.org.ru/view-message.jsp?msgid=3434006] Использует SVG и VML. Поддерживаются все основные на рынке браузеры: Internet Explorer, Mozilla Firefox (и все на Gecko), Opera, Safari (и все на основе Webkit), хотя с Internet Explorer все еще отмечаются некоторые проблемы. JSXGraph, как заверяет автор, легко внедрять, а ее отпечаток мал: 50 килобайт (автор, правда, скромно умолчал о том, что библиотека зависит от Prototype). Никакие дополнительные плагины не нужны. | 2. JSXGraph — кросс-браузерная Javascript-библиотека для интерактивной геометрии, построения графиков функций и визуализации данных.[http://jsxgraph.uni-bayreuth.de/wp/examples/] или [http://www.linux.org.ru/view-message.jsp?msgid=3434006] Использует SVG и VML. Поддерживаются все основные на рынке браузеры: Internet Explorer, Mozilla Firefox (и все на Gecko), Opera, Safari (и все на основе Webkit), хотя с Internet Explorer все еще отмечаются некоторые проблемы. JSXGraph, как заверяет автор, легко внедрять, а ее отпечаток мал: 50 килобайт (автор, правда, скромно умолчал о том, что библиотека зависит от Prototype). Никакие дополнительные плагины не нужны. | ||
'''Документация находится по адресу''' http://jsxgraph.uni-bayreuth.de/wiki/index.php/Documentation | '''Документация находится по адресу''' http://jsxgraph.uni-bayreuth.de/wiki/index.php/Documentation | ||
3. http://billmill.org/static/canvastutorial/color.html | 3. http://billmill.org/static/canvastutorial/color.html | ||
Поддерживается относительно поздними версиями браузеров Firefox, Safari или Opera, не поддерживается браузером Internet Explorer. | Поддерживается относительно поздними версиями браузеров Firefox, Safari или Opera, не поддерживается браузером Internet Explorer. | ||
4. wz_jsgraphics.js [http://74.125.77.132/translate_c?hl=ru&langpair=en|ru&u=http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm&prev=/translate_s%3Fhl%3Dru%26q%3DJavaScript%2B%25D0%25B3%25D1%2580%25D0%25B0%25D1%2584%25D0%25B8%25D1%2587%25D0%25B5%25D1%2581%25D0%25BA%25D0%25B0%25D1%258F%2B%25D0%25B1%25D0%25B8%25D0%25B1%25D0%25BB%25D0%25B8%25D0%25BE%25D1%2582%25D0%25B5%25D0%25BA%25D0%25B0%26tq%3DJavaScript%2Bgraphics%2Blibrary%26sl%3Dru%26tl%3Den&rurl=translate.google.ru&usg=ALkJrhhYLNA8Laui6vTnlLpjsc-6W86CJw] ''Ну очень простая библиотека.'' | 4. wz_jsgraphics.js [http://74.125.77.132/translate_c?hl=ru&langpair=en|ru&u=http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm&prev=/translate_s%3Fhl%3Dru%26q%3DJavaScript%2B%25D0%25B3%25D1%2580%25D0%25B0%25D1%2584%25D0%25B8%25D1%2587%25D0%25B5%25D1%2581%25D0%25BA%25D0%25B0%25D1%258F%2B%25D0%25B1%25D0%25B8%25D0%25B1%25D0%25BB%25D0%25B8%25D0%25BE%25D1%2582%25D0%25B5%25D0%25BA%25D0%25B0%26tq%3DJavaScript%2Bgraphics%2Blibrary%26sl%3Dru%26tl%3Den&rurl=translate.google.ru&usg=ALkJrhhYLNA8Laui6vTnlLpjsc-6W86CJw] ''Ну очень простая библиотека.'' | ||
5. http://craic.com/ortho/ortho_introduction.html | 5. http://craic.com/ortho/ortho_introduction.html | ||
6. Пиксельная графика. [http://74.125.77.132/translate_c?hl=ru&langpair=en|ru&u=http://www.andreas-rozek.de/JavaScript/Libraries/PixelGraphics/Demonstrator.html&prev=/translate_s%3Fhl%3Dru%26q%3DJavaScript%2B%25D0%25B3%25D1%2580%25D0%25B0%25D1%2584%25D0%25B8%25D1%2587%25D0%25B5%25D1%2581%25D0%25BA%25D0%25B0%25D1%258F%2B%25D0%25B1%25D0%25B8%25D0%25B1%25D0%25BB%25D0%25B8%25D0%25BE%25D1%2582%25D0%25B5%25D0%25BA%25D0%25B0%26tq%3DJavaScript%2Bgraphics%2Blibrary%26sl%3Dru%26tl%3Den%26start%3D20&rurl=translate.google.ru&usg=ALkJrhj3anCcevL5xUmlbHHAfP1ciRlqRw]. В Firefox 3.0.12 странно отображается canvas (через строчку). | 6. Пиксельная графика. [http://74.125.77.132/translate_c?hl=ru&langpair=en|ru&u=http://www.andreas-rozek.de/JavaScript/Libraries/PixelGraphics/Demonstrator.html&prev=/translate_s%3Fhl%3Dru%26q%3DJavaScript%2B%25D0%25B3%25D1%2580%25D0%25B0%25D1%2584%25D0%25B8%25D1%2587%25D0%25B5%25D1%2581%25D0%25BA%25D0%25B0%25D1%258F%2B%25D0%25B1%25D0%25B8%25D0%25B1%25D0%25BB%25D0%25B8%25D0%25BE%25D1%2582%25D0%25B5%25D0%25BA%25D0%25B0%26tq%3DJavaScript%2Bgraphics%2Blibrary%26sl%3Dru%26tl%3Den%26start%3D20&rurl=translate.google.ru&usg=ALkJrhj3anCcevL5xUmlbHHAfP1ciRlqRw]. В Firefox 3.0.12 странно отображается canvas (через строчку). | ||
7. Processing.js Красиво, но работает не во всех браузерах. [http://74.125.77.132/translate_c?hl=ru&langpair=en|ru&u=http://dev.jquery.com/~john/processing.js/&prev=/translate_s%3Fhl%3Dru%26q%3DJavaScript%2B%25D0%25B3%25D1%2580%25D0%25B0%25D1%2584%25D0%25B8%25D1%2587%25D0%25B5%25D1%2581%25D0%25BA%25D0%25B0%25D1%258F%2B%25D0%25B1%25D0%25B8%25D0%25B1%25D0%25BB%25D0%25B8%25D0%25BE%25D1%2582%25D0%25B5%25D0%25BA%25D0%25B0%26tq%3DJavaScript%2Bgraphics%2Blibrary%26sl%3Dru%26tl%3Den%26start%3D20&rurl=translate.google.ru&usg=ALkJrhgI-kKdjsMMRCEzaHxsYgsnNXNknw] | 7. Processing.js Красиво, но работает не во всех браузерах. [http://74.125.77.132/translate_c?hl=ru&langpair=en|ru&u=http://dev.jquery.com/~john/processing.js/&prev=/translate_s%3Fhl%3Dru%26q%3DJavaScript%2B%25D0%25B3%25D1%2580%25D0%25B0%25D1%2584%25D0%25B8%25D1%2587%25D0%25B5%25D1%2581%25D0%25BA%25D0%25B0%25D1%258F%2B%25D0%25B1%25D0%25B8%25D0%25B1%25D0%25BB%25D0%25B8%25D0%25BE%25D1%2582%25D0%25B5%25D0%25BA%25D0%25B0%26tq%3DJavaScript%2Bgraphics%2Blibrary%26sl%3Dru%26tl%3Den%26start%3D20&rurl=translate.google.ru&usg=ALkJrhgI-kKdjsMMRCEzaHxsYgsnNXNknw] | ||
==Другие ссылки== | |||
* [http://javascript.ru/manual Справочник по JavaScript] | |||
* [http://black-zorro.com/mediawiki/Index_Page Здесь много чего хорошего] | |||
Текущая версия от 23:54, 13 ноября 2009
HTML-элемент Canvas
Новый HTML-элемент canvas позволяет программировать графику в браузере http://wiki.linuxformat.ru/index.php/LXF94:Графическое_web-приложение
Что такое Canvas http://www.linkexchanger.su/2009/86.html и как заставить его работать в IE
Здесь есть сравнение производительности canvas и SVG http://webo.in/articles/all/2009/23-using-canvas/
Про тег html canvas - 2 http://black-zorro.com/mediawiki/%D0%9F%D1%80%D0%BE_%D1%82%D0%B5%D0%B3_html_canvas_-_2
Здесь есть функция, очищающая canvas http://fastcoder.org/articles/?aid=181
Графические JavaScript библиотеки
1. jsDraw2D : 2D Graphics Library for JavaScript (~66Кб) [1]. Популярная кросс-браузерная библиотека 2D графики. Имеются все основные графические примитивы, такие как drawRectangle, drawCircle, drawEllipse и т.п. Поддерживает все современные веб-браузеры. Выполнение может отличаться в различных браузерах. Тестирована в IE 7, Mozilla Firefox 3, Google Chrome, Opera 9.64 и Safari 4 под Windows XP.
2. JSXGraph — кросс-браузерная Javascript-библиотека для интерактивной геометрии, построения графиков функций и визуализации данных.[2] или [3] Использует SVG и VML. Поддерживаются все основные на рынке браузеры: Internet Explorer, Mozilla Firefox (и все на Gecko), Opera, Safari (и все на основе Webkit), хотя с Internet Explorer все еще отмечаются некоторые проблемы. JSXGraph, как заверяет автор, легко внедрять, а ее отпечаток мал: 50 килобайт (автор, правда, скромно умолчал о том, что библиотека зависит от Prototype). Никакие дополнительные плагины не нужны. Документация находится по адресу http://jsxgraph.uni-bayreuth.de/wiki/index.php/Documentation
3. http://billmill.org/static/canvastutorial/color.html Поддерживается относительно поздними версиями браузеров Firefox, Safari или Opera, не поддерживается браузером Internet Explorer.
4. wz_jsgraphics.js [4] Ну очень простая библиотека.
5. http://craic.com/ortho/ortho_introduction.html
6. Пиксельная графика. [5]. В Firefox 3.0.12 странно отображается canvas (через строчку).
7. Processing.js Красиво, но работает не во всех браузерах. [6]
