Спонсор: Microsoft
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 314 / 17 | Длительность: 11:36:00
Специальности: Программист
Практическая работа 6:

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

< Лекция 8 || Практическая работа 6: 12 || Лекция 9 >
Аннотация: На этом занятии разрабатывается мобильный виджет с JavaScript - кодом, использующим свойства и методы объектной модели документа для представления графической информации. Демонстрируются возможности тега <canvas>.

Ход выполнения работы:

  1. Запустите VS 2012. Выполните следующие команды: Файл -> Создать проект -> Visual C# -> CordovaWP8_3_0_0 -> DomAndCanvas.
  2. В папке проекта www откройте файл index.html. Это будет главная страница, с доступом к страницам Graphic.html и Dom.html. Удалите её содержание, соответствующее шаблону проекта, и вставьте следующий код:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Dom and Canvas</title>
        </head>
        <body>
            <div class="app">
                <h1>Dom and Canvas</h1>
                    <menu>
                 <li>
                  <h1>
                    <a href ="Graphic.html">Страница с Canvas</a> - ссылка на страницу Graphic.html
                  </h1>
                </li>   
                <li>
                  <h1>
                    <a href ="Dom.html">Страница с DOM</a> - ссылка на страницу Dom.html
                  </h1>
                </li>               
                   </menu>
                </div>
        </body>
    </html>

    Главная страница имеет две гиперссылки на другие страницы которые пока отсутствуют.

  3. Создайте в папке www новую страницу Graphic.html, демонстрирующую возможности тега <canvas>.

    Код страницы:

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, 
          minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
            <link rel="stylesheet" type="text/css" href="css/index.css" />
            <title>Graphic</title>
          <script type="text/javascript">
            CanvasMaster=new Object();
            CanvasMaster.showCanvas=function()
            {
            canvasNow  = document.getElementById("sunset");
            contextNow = canvasNow.getContext('2d');
            sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379);
            sunsetGradient.addColorStop(0, "yellow");
            sunsetGradient.addColorStop(1, "#cc0000")
            contextNow.fillStyle = sunsetGradient;
            contextNow.beginPath();
            contextNow.arc(100,100,75,0,Math.PI*2,false);
            contextNow.closePath();
            contextNow.fill()
            }
          </script>
    
      <style type="text/css">
        <body>
          {
          font-family:Verdana, Geneva, sans-serif;
          color:#cc0000;
          }
         </style>
          
            <title>Sunset</title>
            </head>
            <body onLoad="CanvasMaster.showCanvas()">
              <figure>
                <canvas id="sunset" width="400" height="400" > Как жаль, 
    что вы не можете увидеть прекрасный закат из-за того, 
    что ваш браузер не поддерживает HTML 5!</canvas>
                <figcaption>
                  <p>Закат</p>
                </figcaption>
              </figure>
        </body>
    </html>

    Пояснения к JavaScript - коду, содержащему свойства и методы объекта Canvas:

    • CanvasMaster=new Object(); - создание пользовательского объекта CanvasMaster;
    • CanvasMaster.showCanvas=function() - объявление функции showCanvas;
    • canvasNow = document.getElementById("sunset"); - определение объекта, как метода объекта document, имеющего имя sunset;
    • contextNow = canvasNow.getContext('2d'); - canvas используется в плоскости;
    • sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379); - создание градиента.

      Метод createLinearGradient() имеет четыре компоненты. Первые две отвечают за начало заливки - Хн, Ун. Вторые две - за конец заливки - Хк, Ук.

      Еще один пример заливки:

      var gradient=ctx.createLinearGradient(0,0,0,170);
      gradient.addColorStop(0,"black");
      gradient.addColorStop(1,"white");
      ctx.fillStyle=my_gradient;
      ctx.fillRect(20,20,150,100);

      Результат заливки:


    • sunsetGradient.addColorStop(0, "yellow"); -цвет начинающий заливку;
    • sunsetGradient.addColorStop(1, "#cc0000") - цвет завершающий заливку;
    • contextNow.fillStyle = sunsetGradient; - применение параметров стиля;
    • contextNow.beginPath(); - отрисовка окружности;
    • contextNow.arc(200,200,150,Math.PI*2,false);
    • contextNow.closePath().

      Пояснения метода arc():

      • Первые два параметра являются центром окружности;
      • третий параметр отвечает за радиус;
      • четвертый параметр отвечает за длину нарисованной окружности в радианах;
      • пятый параметр определяет выбор отрисовки четвертого параметра.

      Пример 1 рисования дуги:

      ctx.beginPath();
      ctx.arc(200,200,150,0,Math.PI*2,false);
      ctx.stroke();

      Результат:


      Пример 2 рисования дуги:

      ctx.beginPath();
      ctx.arc(200,200,150,0,Math.PI*1.5,false);
      ctx.stroke();

      Результат:


    • contextNow.fill() - выполнение заливки.

    Вызов JavaScript - кода выполняется при загрузке страницы, этому событию соответствует тег

    <body onLoad="CanvasMaster.showCanvas()">

    Пример тестирования страницы Graphic.html:

< Лекция 8 || Практическая работа 6: 12 || Лекция 9 >
Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?

Александр Бут-Гусаим
Александр Бут-Гусаим
Россия, Тула
Виктор Ефремов
Виктор Ефремов
Россия