«STAR WARS REIMAGINED: african totem C3PO» © 2016, Евгений 
CGtalk.by CG Award 2016: «STAR WARS REIMAGINED: african totem C3PO», Евгений
   
Главная Форумы Галерея Теория Конкурсы Вакансии
Назад   CGtalk.by > Программирование > Программирование
Новые сообщения Зарегистрироваться

 
Дополнительно Режимы отображения Ответить
Старый 08.02.2007, 15:49   #1
black zorro
Участник
 
Сообщений: 12
Эта статья начнет серию материалов посвященных особой возможности html – тегу <canvas>. Этот тег необычен тем, что не управляет параметрами форматирования текста, как например это слово будет выделено курсивом, а дает возможность нарисовать на странице любое изображение используя команды JavaScript.

Фактически до появления <canvas>, если вам было необходимо разместить на сайте динамическое изображение, например, график посещений сайта по дням недели, то вы либо создавали PHP-скрипт, благо, даже на бесплатных хостингах давно есть поддержка библиотеки gd2 графических функций (линия, прямоугольник, эллипс и т.д.). Либо вы создавали flash-ролик, который также с помощью своих функций рисовал изображение. В отдельных случаях возможно было использовать средства Java Applet или ActiveX.

Чем плохи три последних подхода:
- Flash как и Java Applet требует установленного плагина, а в случае Java Applet большого размера. И еще, например, у меня на работе корпоративный proxy-сервер вырезает из страниц flash-ролики, конечно, это не показатель, но все же.

- ActiveX — работают только под IExplorer и только под Windows. Не говоря о том, что у многих пользователей эта "дырявая", и прямо скажем опасная технология просто отключена.

Подход номер один, когда картинку генерирует PHP-код — универсален, и надежен, правда потребляет слишком много избыточного трафика для некоторых задач. Например, если вы создаете приложение, которое рисует график функции:

z=f(x,y)

то большая часть получившегося изображения будет залита одним цветом фона и лишь небольшая часть картинки будет отображать линии графика функции. Для эксперимента я создал картинку размером 1024х768 с нарисованной линией синусоиды. Ее размеры в разных форматах были таковы: gif — 8 кб, jpeg — 33 кб, png — зашкалил за 210 кб.

Последнее замечание. Наше приложение будет гораздо удобнее, если пользователь сможет получать графики функций без подключения к Интернету, что в случае dial-up или повременной оплаты самое то.

Будем считать, что я вас убедил в полезности подхода с переносом генерации изображения с сервера на сторону клиента, а теперь пару слов об истории и о текущей ситуации с HTML <canvas>.

Тег <canvas> не входил ни в один из стандартов. Его придумала и реализовала в своем браузере Safari компания Apple. Идею подхватила группа разработчиков Mozilla и добавила поддержку тега <canvas> в движок html-рендеринга Gecko используемого в Firefox и смежных продуктах. Затем инновацию поддержала компания Opera Software и начиная с 9-ой версии, браузер Opera также знает тег <canvas>. Самые "активные" разработчики самого "передового" браузера (я говорю про IE) в это время как всегда спали...

К счастью Novell и Google начали проекты по реализации плагина поддерживающего <canvas> для IExplorer'а. Добавилась ли поддержка <canvas> в новомодном 7-ой IE я не знаю, т.к. нигде упоминаний в интернете об этом я не нашел, а попробовать не могу, из-за нежелания выкачивать сей монструозный продукт. Следует отметить, что данный тег планируют внести в перспективный пятый стандарт html.

Самый простой пример использования <canvas>, это вставить его в тело html документа, не забыв про fallback. Проще говоря, если браузер клиента не поддерживает данный тег, то он должен увидеть некоторое поясняющее сообщение. В примере ниже это размещенное внутри тега <canvas> изображение.

Очень важно дать canvas-у идентификатор для этого служит атрибут id, если вы так не сделаете, то не сможете из JavaScript обращаться к <canvas> и рисовать на нем. В качестве стилевого оформления я задал области <canvas> границу черного цвета, это только для удобства дальнейшей работы.

Код:
 <html><head>

   </script>

 </head> <body>

  <canvas id="canva" width="400" height="400" style="border: 1px solid black;">

    [img]no_canvas_sorry.jpg[/img]

  </canvas>

  <button onclick="draw()">draw!</button><!—эта кнопка вызывает некоторую функцию рисования -->

  </body></html>
Следующий шаг, это создание функции, которая будет вызываться при нажатии на кнопку button.

Функция должна получить доступ к объекту "canva", для этого мы применим стандартный метод getElementById (тот самый идентификатор объекта, который вы, надеюсь, не забыли задать).

Затем следует проверить, что браузер умеет рисовать, следует "попросить его" для <canvas> вернуть так называемый контекст рисования (проще говоря, место, где рисуют). И затем, вооружившись справочником функций, можно начинать непосредственно рисовать.

Самое простое, это создать прямоугольник, закрашенный некоторым цветом, при этом вы можете задать цвет как привычный RGB, или же RGBa - буква "a" в конце дает нам возможность задать alpha компоненту (прозрачность).

Для того чтобы нарисовать прямоугольник есть три функции:
fillRect — рисуют прямоугольник сплошным цветом
strokeRect — только границу прямоугольника
clearRect — очищают часть области рисования

Все эти функции получают в качестве параметра координаты левого верхнего угла прямоугольника и его размеры.

Код:
      function draw(){

        var canvas = document.getElementById('canva');

        if (canvas.getContext){

          var ctx = canvas.getContext('2d');

           // предупреждая следующий вопрос, нет, трехмерного контекста рисования нет,

           // рисовать можно только на плоскости

           ctx.fillStyle = "rgb(200,0,0)";

           ctx.fillRect (10, 10, 55, 50);

 

           ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

           ctx.fillRect (30, 30, 55, 50);

 

           ctx.fillStyle = "rgb(0,0,0)"; // черный цвет

           ctx.fillRect(100,100,100,100);

           ctx.clearRect(125,125,60,60);

           ctx.strokeRect(150,150, 120,120);

        }

      }
Name:  canvas_01.gif
Views: 1164
Size:  7.6 КБ

Если вам необходимо нарисовать более сложную фигуру, то следует использовать Path.

Path — это путь по которому водится виртуальный карандаш. Путь должен начаться, карандаш проводит несколько линий (дуг, кривых Безье, прямоугольников и т.д.), затем путь закрывается. Этот шаг необязателен, например, вы сами довели линию от последней точки к первой.

И последний шаг — это запуск отрисовки либо контура Path, либо ее закраска, как вариант рисуется и контур и фоновая закраска одновременно.

Для того чтоб нарисовать линию вы используете две базовые функции:

moveTo(x,y)
lineTo(x,y).

Первая из них поднимает невидимый карандаш и перемещает его в точку (x,y).
Вторая перемещает карандаш в точку (x,y) уже ведя карандаш по "листу".

Если вам хочется нарисовать круг/дугу, то используйте функцию:

arc(x, y, radius, startAngle, endAngle, anticlockwise)

Ее параметры соотвественно координаты центра круга или дуги, затем идет радиус, параметры startAngle и endAngle — задают начало и конец дуги в радианах (и это важно), последним идет параметр anticlockwise — логический признак того, будет ли дуга рисоваться по часовой или против часовой стрелки.

В примере ниже я рисую две звезды, одна из которых отображается в виде контура, вторая в виде заливки сплошным цветом, также рисуется пример дуги.

Для того чтобы задать цвет контура используется свойство strokeStyle.

Код:
      function draw(){

        var canvas = document.getElementById('canva');

        if (canvas.getContext){

          var ctx1 = canvas.getContext('2d');

          var ctx2 = canvas.getContext('2d');

          ctx1.beginPath ();

          ctx2.beginPath ();

          var deltaI = 0.1;

          ctx1.moveTo ( 200 + 100*Math.cos(0), 200 - 100*Math.sin(0)  );

          ctx2.moveTo ( 200 + 170*Math.cos(0), 200 - 170*Math.sin(0)  );

 

          for (var i = 0; i < 2 * Math.PI; i+= deltaI){

            ctx1.lineTo ( 200 + 100*Math.cos(i ), 200 - 100*Math.sin(i)  );

            ctx1.lineTo ( 200 + 150*Math.cos(i + deltaI), 200 - 150*Math.sin(i + deltaI)  );

 

            ctx2.lineTo ( 200 + 170*Math.cos(i ), 200 - 170*Math.sin(i)  );

            ctx2.lineTo ( 200 + 190*Math.cos(i + deltaI), 200 - 190*Math.sin(i + deltaI)  );

          }

          ctx1.closePath ();

          ctx1.stroke ();

          ctx2.closePath ();

          ctx2.fillStyle="rgb(120,78,89)";

          ctx2.fill();

        }

        ctx1.strokeStyle = "rgba(255,255,255,125)";

        ctx1.beginPath ();

        ctx1.arc (200, 200,40,  45 * (Math.PI / 180),  315 * (Math.PI / 180), false);

        ctx1.closePath();

        ctx1.stroke ();

     }
Name:  canvas_02.gif
Views: 1167
Size:  23.5 КБ

Обратите внимание на одновременное существование двух контекстов рисования.

Рабочий пример с двумя кнопками, рисует все то про что рассказано в статье:

http://black-zorro.jino-net.ru/canvas/bag.htm

Если интересен исходный код то View->PageSource (или как там в вашем любимом браузере).

В следующий раз я покажу как отобразить на canvas существующие изображения jpeg/gif, а также как работать с кривыми Безье, кроме того, мы сделаем введение в трансформации смещения, вращения, масштабирования.


© 2006, Николай Жишкевич

Все примеры кода данной статьи вы может найти на сайте: http://black-zorro.jino-net.ru
black zorro офлайн   Ответить с цитированием
Старый 01.04.2007, 00:49   #2
venz
Участник
 
Сообщений: 28
Ответ на: HTML: <Canvas>

Спасибо большое за статью. Надеюсь увидеть продолжение темы. Но все таки это еще из части будущего учитывая процентовку браузеров и их версий, да и снова слабому пользователю нужно прописывать ЧТО ОН ДОЛЖЕН СДЕЛАТЬ, ЧТО БЫ УВИДЕТЬ ЧТО ЖЕ ВЫ ЕМУ ПРЕДЛАГАЕТЕ - это очень подозрительный элемент общения - и юзер уже должен приобрести доверие к вашему ресурсу. Считаю что всетаки в данный момент юзер доверяет в большей степени старым имежам ды флешам - я вообще не уверен не приведет ли данная, простите, но "примочка" к каким-либо лавинообразным процессам и отказам системы юзера в руках "нехороших" людей? HTML5 еще набирают людей, IE7 я лично пользовать не спешу тире не буду вообще - но таких немного. А вообще простите за негатив internet - по моему мало того что переживает кризис, так еще и технологии устарели так, что происходит какая то подмена, пародия, инсцинирование...
Я по крайней мере рад, что хоть старые веб-дизайнеры прошли эру бестолкового флешь-бешенства и перестали делать все подряд анимированным и прыгающим, загружающимся 10минут, но всетаки это приспособленчество! нет пока какой-то внятной концептуальной технологии от начала до конца. Вы говорите о canvas, W3C говорит о SVG, но это все еще очень ново для среднего простого пользователя, а ему порой нужно так мало... (а чтобы получить это ему надо сделать так много...)

Ждем продолжения! Спасибо!
venz офлайн   Ответить с цитированием
Старый 23.04.2007, 20:36   #3
Notna
Участник
 
Сообщений: 1
Ответ на: HTML: <Canvas>

Расскажите пожалуйста, какие справочники стоит почитать по рисованию на javascript и где их найти?
Notna офлайн   Ответить с цитированием
 
Ответить


Дополнительно
Режимы отображения

Правила создания сообщений
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Вкл
[IMG] Вкл
HTML Выкл

Быстрый переход

Polygon.by. Учебно-практический центр компьютерной графики.

Онлайн журнал о магии компьютерной графики и цифрового искусства «Magic CG»
Пакет инструментов для обеспечения качества 3D-контента для игр
Школа-студия анимационных фильмов
» Сентябрь 2018
В П В C Ч П С
262728293031 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 123456

Текущее время 11:48 (GMT +4)


Powered by vBadvanced CMPS v3.0 RC1
Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Хостинг и облачные решения — Active Technologies

Все права защищены © 2006 — 2014, CGtalk.by