НОУ ИНТУИТ | Разработка гибридных приложений для мобильных устройств под Windows Phone. Лекция 6: Использование возможностей DOM в мобильных разработках

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 19.03.2014 | Уровень: для всех | Доступ: платный

|

Вам нравится? Нравится 13 студентам

| Поделиться |

Поддержать программу

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

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

Запустите VS 2012. Выполните следующие команды: Файл -> Создать проект -> Visual C# -> CordovaWP8_3_0_0 -> DomAndCanvas.

В папке проекта 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>

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

Создайте в папке 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:

увеличить изображение