1. Использование тега Canvas в «боевых условиях»

    Игорь Кононученко

    технический директор

    © Студия дизайна «Веджо», 20 марта 2010
  2. х:0, y:0

    Что такое Canvas

    <canvas id="example" width="200" height="200">

    Куда делся наш Canvas?

    </canvas>

    var example = document.getElementById('example');

    var context = example.getContext('2d');

    context.fillStyle = "rgb(34,150,239)";

    context.fillRect(850, 300, 120, 120);
    x:850, y:300
    x:970, y:420

  3. Harmony

  6. Симптом-гид

    RageMapDesign + костыли + mapper.js

    • неудобно
    • дремучий код
    • медленно

  8. Корзина с печеньем

    RageMapDesign +  своя библиотека + 

    		excanvas.js

    • удобно
    • быстренько
    • осталось преобразование координат

  9. Своя библиотека

    var maps = [

    {coords:[207,252,..., 216,239], color:'#FF8000', id:'obj' },

    {coords:[262,264,..., 263,248], color:'Green', id:'light' }

    ];

    window.onload = function() {

    new MapCanvas(maps, 329, 322);

    }
    Задаем полигоны в координатах вида [x1, y1, ..., xn, yn]
    • ложим Canvas поверх рисунка
    • слушаем mousemove
    • ищем попадание курсора в полигон
    • рисуем — moveTo, lineTo, globalAlpha, stroke, fill
    W. Randolph Franklin —

    pnpoly

  10. Подробнее о координатах

    <area shape="poly " nohref="nohref"

    alt="" coords"72, 88, 94, ..., 234">

    		 ≠

    coords:[72, 88, 94, ..., 234]
    Чем больше областей, тем сложнее и дольше вручную копировать координаты.

  11. Как получить координаты?

    RageMapDesign
    vs
    ?

  15. Подводим итоги

    • Краткие сведения о Canvas
    • Подсветка областей произвольной формы
    • Инструменты
  16. Игорь Кононученко
    i@vedjo.com.ua
    www.kigorw.com
    Студия «Веджо»
    www.vedjo.com.ua