Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Использование объектной модели документа для манипулирования содержимым страницы мобильного виджета
Разработка рисунка
Сначала мы назначим рисунку цвет. Для создания цвета можно использовать любой из доступных приемов. Будем использовать шестнадцатеричный формат:
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>. Результат выполнения данного сценария на эмуляторе мобильного устройства:
Следующий пример использования <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>
Результат выполнения данного сценария на эмуляторе мобильного устройства:
Последний пример этой лекции демонстрирует возможность <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 - кода на эмуляторе мобильного устройства: