HTML5 за 10 минут

Пример применения элемента управления Canvas


Для того чтобы показать, каким образом действует элемент управления Canvas, создадим в качестве примера HTML- документ под названием canvas.html. Результат загрузки этого документа в браузер Firefox приведен на 2.1, а весь его исходный код — в конце данной главы.

Приступая к созданию примера HTML-документа canvas.html, выполните следующие действия.

1.   Создайте HTML-документ canvas .html в любом редакторе текста, например в Windows WordPad.

2.   Введите приведенный ниже код создания элемента <canvas> и задания сценария JavaScript. Следует иметь в виду, что сценарий JavaScript будет размещаться в теле функции загрузки loader, которая выполняется лишь после полной загрузки элемента управления Canvas браузером (только не вводите три вертикальные точки, поскольку они служат лишь для обозначения места, где в дальнейшем вам предстоит ввести дополнительный код.)

<1DOCTYPE html>

<html>

<head>

<title>

Пример применения элемента управления Canvas </title>

<script type-text/javascript"> function loader()

{

}

</script>

</head>

<body onload="loader()">

<Ы>Пример применения элемента управления Canvas</hl>

<canvas id="canvas" width="600" height="500">

</canvas>

</body>

</html>

3.   Введите выделенный ниже полужирным код сценария JavaScript для создания объекта, соответствующего элементу управления Canvas. Этот объект будет использоваться для доступа к элементу управления Canvas из сценария JavaScript.

<!DOCTYPE html>

<html>

<head>

<title>

Пример применения элемента управления Canvas

<script type="text/javascript"> function loader()

{

var canvas = document.getElementByld (canvas); var canvasl = canvas.getContextf2d);

}

</script>

</head>

<body onload-loader()">

<Ь1>Пример применения элемента управления Canvas</hl>

<canvas id="canvas" width="600" height="500">

</canvas>

</body>

</html>

4.   Сохраните HTML-документ в файле canvas.html. Непременно сделайте это в текстовом формате. По умолчанию в текстовом редакторе WordPad выбирается расширенный текстовый формат RTF, непригодный для браузеров.

Итак, начало рассматриваемому здесь примеру положено. Далее вам предстоит нарисовать ряд прямоугольников на виртуальном полотне элемента управления Canvas.

Комментарии закрыты