Хотя новым веб-технологиям в HTML5 даются обобщенные названия, все они не являются простыми. Да, холст создается с помощью тега <canvas>, и ему могут быть предоставлены ширина и высота, и их можно немного изменять с помощью CSS, но для записи в холст (или для чтения из него) нужно использовать JavaScript. Итак, углубимся в эту тему и приступим к использованию нового тега <canvas>.
Теперь посмотрим, что именно происходит.
Отображение японского флага с помощью холста
<!DOCTYPE html>
<html>
<head>
<title>Холст HTML5</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='320' height='240'>
Это элемент canvas с идентификатором <i>mycanvas</i>
Этот текст виден только в браузерах, не поддерживающих HTML5
</canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
context.fillStyle = 'red'
S(canvas).border = '1px solid black'
context.beginPath()
context.moveTo(160, 120)
context.arc(160, 120, 70, 0, Math.PI * 2, false)
context.closePath()
context.fill()
</script>
</body>
</html>
Сначала помещается объявление <!DOCTYPE html>, чтобы сообщить браузеру о том, что документ будет использовать html5.
В теле документа определяется элемент canvas, которому дается идентификатор mycanvas, и задаются ширина и высота 320 × 240 пикселов.
Затем следует раздел JavaScript, в котором задаются стили и прорисовки холста. Начало создания объекта canvas обозначено вызовом функции O в отношении элемента canvas. Как вы помните, в результате этого вызывается функция document.getElementById, и, следовательно, это лишь более короткий способ ссылки на элемент.
Все это вы уже видели раньше, а затем следует нечто новое:
context = canvas.getContext('2d')
Команда вызывает метод getContext нового, только что созданного объекта canvas, запрашивая двумерный доступ к холсту путем передачи значения '2d'.
Вооружившись данным содержимым в контексте объекта, мы начнем выдавать последующие команды рисования, установив для свойства fillStyle этого контекста значение 'red':
context.fillStyle = 'red'
Затем вызывается функция S для установки свойству border объекта canvas значения однопиксельной сплошной черной линии для очертания изображения флага:
S(canvas).border = '1px solid black'
После того как все будет готово, открывается путь контекста и позиция рисования перемещается к точке с координатами (160; 120):
context.beginPath()
context.moveTo(160, 120)
Затем рисуется дуга с центром, имеющим данные координаты. Ее радиус — 70 пикселов, она начинается с угла 0° (что является правым краем окружности, если смотреть прямо на нее) и продолжается по всей окружности в радианах, определяемых значением 2π:
context.arc(160, 120, 70, 0, Math.PI * 2, false)
Последнее значение false служит признаком направления рисования дуги по часовой стрелке; а значение true было бы признаком рисования, осуществляемого против часовой стрелки.
И наконец, мы закрываем путь и осуществляем его заливку, используя предопределенное значение в свойстве fillStyle, которое мы несколькими строками ранее установили в 'red':
context.closePath()
context.fill()