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

Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 341 / 32 | Длительность: 11:36:00

Темы: Программирование, Мобильные технологии

Специальности: Программист

Разработка рисунка

Сначала мы назначим рисунку цвет. Для создания цвета можно использовать любой из доступных приемов. Будем использовать шестнадцатеричный формат:

contextNow.fillStyle = "#A7A7A7";

Свойство fillStyle определяет только цвета заливки и не используется для цвета обводки (контура) объекта.

Далее этим цветом заливки следует закрасить некоторую форму. Чтобы закрасить прямоугольник, можно использовать следующий код:

contextNow.fillRect(0, 0, 950, 950);

Первые два значения (0, 0) задают положение прямоугольника внутри области элемента canvas, а вторые два значения (950, 950) задают ширину и высоту прямоугольника.

Последнее, что нам потребуется сделать, это действительно выполнить закрашивание прямоугольника заданным нами цветом. Эту задачу выполняет следующая строка:

contextNow.fill();

При этом не имеет значения, сколько операций закрашивания вы определите; всего один метод fill () позаботится обо всех определенных заливках.

Теперь давайте сведем все эти фрагменты кода воедино в программе HTML5. Весь код этого сценария представлен в следующем листинге [1]:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    CanvasMaster = new Object();
    CanvasMaster.showCanvas = function () {
        canvasNow = document.getElementById("briefCase");
        contextNow = canvasNow.getContext('2d');
        contextNow.fillStyle = "#A7A7A7";
        contextNow.fillRect(0, 0, 950, 950);
        contextNow.beginPath();
        contextNow.moveTo(400, 200);
        contextNow.lineTo(720, 200);
        contextNow.lineTo(720, 380);
        contextNow.lineTo(880, 380);
        contextNow.lineTo(880, 780);
        contextNow.lineTo(280, 780);
        contextNow.lineTo(280, 380);
        contextNow.lineTo(400, 380);
        contextNow.lineTo(400, 200);
        contextNow.closePath();
        contextNow.fillStyle = "#DC143C";
        contextNow.fill();
        contextNow.beginPath();
        contextNow.moveTo(460, 260);
        contextNow.lineTo(660, 260);
        contextNow.lineTo(660, 380);
        contextNow.lineTo(460, 380);
        contextNow.closePath();
        contextNow.fillStyle = "#FFD700";
        contextNow.fill();
    }
</script>
 <style type ="text/css">
 body,a {
     font-size:70px
 }
</style>
<title>Закрашенный контурный рисунок</title>
</head>
<body onload  ="CanvasMaster.showCanvas()">
<article>
  <figure>
    <canvas id="briefCase" width="950" height="950" >
  </canvas>
    <figcaption> <br/>
    <h1>Здесь был Пикассо</h1></figcaption>
  </figure>
</article>
<br />
----------------------------------------
</body>
</html>

Как видите, данная программа использует стиль CSS3 и простую надпись, а также семантические теги <figure> и <figcaption>, охватывающие тег <canvas>. Результат выполнения данного сценария на эмуляторе мобильного устройства:

Рис. 13.2.

Следующий пример использования <canvas> показывает, как можно добавить три метода к объекту CanvasMaster. Назовем их showCanvas(), punchOut(), punchOut2(). Первый рисует красный квадрат размером 800*800 пикселей. Второй и третий рисуют два маленьких квадрата другого цвета (отверстия) внутри первого. Вызов методов выполняется в тегах соответствующих гиперссылок, например, вызов метода рисования маленького квадрата:

<a href="#" onClick="CanvasMaster.punchOut()">Пробить отверстие</a>

Весь код представлен в листинге:

<!DOCTYPE html>
<html>
<head>
<script type ="text/javascript">
    // Цвета: 595241,B8AE9C,FFFFFF,ACCFCC,8A0917
    CanvasMaster = new Object();
    CanvasMaster.showCanvas = function () {
        canvasNow = document.getElementById("strokeAndChomp");
        contextNow = canvasNow.getContext('2d');

        contextNow.fillStyle = '#f53715';
        contextNow.fillRect(50, 200, 800, 800);

        contextNow.fill();
    }
   CanvasMaster.punchOut = function () {
        contextNow.clearRect(300, 350, 200, 200);
   }
   CanvasMaster.punchOut2 = function () {
        contextNow.clearRect(600, 650, 100, 100);
    
   }
</script>
<style type="text/css">
body {
	font-family:Verdana;
	color:#e21849; 
	background-color:#f1d35f;
    font-size:60px;
}
a {
	text-decoration:none;
	color:#1634c3;
	margin-left:16px;
    font-size:40px;
}
</style>
<title>Обводка и вырезание</title>
</head>
<body onLoad="CanvasMaster.showCanvas()">
<article>
  <figure>
    <canvas id="strokeAndChomp" width="1000" height="1000" > 
        Вы должны видеть то, что показывают браузеры с поддержкой HTML 5! 
        Как можно скорее установите такой браузер! </canvas>
    <figcaption> 
      Квадрат </figcaption>
  </figure>
  <section>
    <p><a href="#" onClick="CanvasMaster.punchOut()">Пробить отверстие</a></p>
  </section>
     <section>
    <p><a href="#" onClick="CanvasMaster.punchOut2()">Пробить второе отверстие</a></p>
  </section>
  <section>
    <p><a href="#" onClick="CanvasMaster.showCanvas()">Восстановить квадрат</a></p>
  </section>
</article>
</body>
</html>

Результат выполнения данного сценария на эмуляторе мобильного устройства:

увеличить изображение
Рис. 13.3.

Последний пример этой лекции демонстрирует возможность <canvas> для работы с готовыми изображениями, содержащимися на странице или в отдельном файле. Отрисовка таких изображений производится методом drawImage(), который может быть вызван с разным набором аргументов. Самый простой случай включает сам объект Image и его координаты на холсте. В примере эти координаты меняются посредством вложенного цикла. Код представлен в листинге:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
     function showImages() {
        var canvas = document.getElementById("briefCase");
        var contextNow = canvas.getContext('2d');
        var img = new Image(); var i, j, sx, sy ;
        img.onload = function () {
            for (i = 0; i < 3; i++) {
                for (j = 0; j < 4; j++) {
                    sx = 300 * i; sy = 350 * j;
                    contextNow.drawImage(img, sx, sy);
                }
            }
        }
        img.src = 'images/Dog.jpg';
       
    }
</script>
 <style type ="text/css">
 body,a {
     font-size:40px
 }
</style>
<title>Работаем с изображением</title>
</head>
<body onload  ="showImages();">
<article>
  <figure>
    <canvas id="briefCase" width="950" height="1400" >
  </canvas>
    <figcaption> 
    <h3>Цикл выполнен!!!</h3></figcaption>
  </figure>
</article>
</html>

Результат выполнения данного JavaScript - кода на эмуляторе мобильного устройства:

увеличить изображение
Рис. 13.4.

Дальше >>

Авторизоваться

Разработка гибридных приложений для мобильных устройств под Windows Phone

Использование объектной модели документа для манипулирования содержимым страницы мобильного виджета

Разработка рисунка

Вопросы и ответы