<Canvas> - это новый HTML -элемент, который можно использовать языком сценариев (обычно JavaScript) для рисования графики. Например, его можно использовать для рисования изображений, синтеза изображений или выполнения простых (и не такими простой) анимацией. На изображении справа показаны некоторые примеры приложения <Canvas>, и мы увидим их реализацию в этом учебнике.
<Canvas> сначала был представлен на приборной панели Apple Mac OS X, а затем применил в Safari. Браузеры, основанные на Gecko1.8, таких как Firefox 1.5, также поддерживают этот новый элемент. Элемент <Canvas> является частью WhatWG Web Applications 1.0, которые известны для всех, стандартной спецификации HTML 5.
В этом уроке я постараюсь рассказать вам, как использовать элемент <Canvas> на вашей собственной веб -странице. Приведенные примеры должны дать вам четкие концепции, а именно то, что вы можете сделать с <Canvas>. Эти примеры также могут служить отправной точкой для вашего приложения <Canvas>.
Прежде чем начать использовать
Использование элемента <Canvas> не сложно, если у вас есть базовые знания HTML и JavaScript.
Как упомянуто выше, не все современные браузеры поддерживают элементы <canvas>, поэтому вам нужны Firefox 1,5 или более поздней версии или другие браузеры на основе геккона, такие как Opera 9, или недавняя версия Safari, чтобы увидеть действия всех примеров.
<canvas> элемент
Давайте начнем этот урок, посмотрев на сам элемент <Canvas>.
Давайте начнем с определения элемента <Canvas>.
<canvas id = ширина учебника = 150 высота = 150> </canvas>
Это очень похоже на элемент <img>, единственное отличие состоит в том, что у него нет атрибутов SRC и Alt. <Canvas> очень похоже на <img>, единственное отличие состоит в том, что у него нет атрибутов SRC и Alt. Элемент <Canvas> имеет только два атрибута - ширина и высота . Они оба необязательны и также могут быть установлены с использованием свойств DOM или правил CSS. Когда не указано атрибуты ширины и высоты, холст изначально будет иметь ширину 300 пикселей и высотой 150 пикселей . Элемент может быть произвольно размер по CSS, но во время рендеринга изображение масштабируется, чтобы соответствовать размеру макета. (Если ваши визуализации кажутся искаженными, попробуйте указать ваши атрибуты ширины и высоты явно в атрибутах <Canvas>, а не с помощью CSS.) Хотя размер холста можно изменить через CSS, изображение рендеринг будет масштабироваться, чтобы адаптироваться к схеме (если вы обнаружите, что результаты, выяснившиеся, вы не определяете, что вы не сможете, что вы не сможете прояснить. Значения холста).
Атрибут ID не специфичен для элемента <Canvas>, но является одним из атрибутов HTML по умолчанию, которые можно применить (почти) каждый элемент HTML (например, класс). Это всегда хорошая идея для предоставления идентификатора, потому что это намного облегчает его идентификацию в нашем сценарии.
Атрибут ID не является исключительным для <Canvas>. Как и стандартный тег HTML, любой элемент HTML может указать его значение идентификатора. Как правило, это хорошая идея, чтобы указать идентификатор для элемента, что облегчает применение в сценариях.
Элемент <Canvas> может быть стилизован так же, как и любое обычное изображение (поля, граница, фон и т. Д.). Эти правила, однако, не влияют на фактический рисунок на холсте. Посмотрим, как это сделано позже в этом уроке. Когда правила стиля не применяются к холстам, он изначально будет полностью прозрачным. Элемент <Canvas> может быть стилизован так же, как и любое обычное изображение (поля, граница, фон и т. Д.). Эти правила, однако, не влияют на фактический рисунок на холсте. Посмотрим, как это сделано позже в этом уроке. Когда правила стиля не применяются к холстам, он изначально будет полностью прозрачным. Элемент <Canvas> может быть стилизован так же, как и любое обычное изображение (поля, граница, фон и т. Д.), Как если бы это было нормальное изображение. Тем не менее, эти стили не оказывают никакого влияния на фактическое изображение, сгенерированное Canvas. Ниже мы увидим, как применить стили. Если вы не указали стиль, Canvas полностью прозрачен по умолчанию.
Поскольку элемент <canvas> по -прежнему является относительно новым и не внедряется в некоторых браузерах (таких как Firefox 1.0 и Internet Explorer), нам нужно средство обеспечения запасного контента, когда браузер не поддерживает элемент.
Поскольку <Canvas> является относительно новым, некоторые браузеры не реализуют его, например, Firefox 1.0 и Internet Explorer, нам необходимо предоставить альтернативный контент дисплея для браузеров, которые не поддерживают Canvas.
К счастью, это очень просто: мы просто предоставляем альтернативный контент внутри элемента Canvas. Браузеры, которые не поддерживают его, будут полностью игнорировать элемент и отобразить запасной контент, другие просто будут производить холст.
Например, мы могли бы предоставить текстовое описание содержания Canvas или предоставить статическое изображение динамически визуализированного контента. Это может выглядеть примерно так:
Нам просто нужно вставить заместительную контент непосредственно в элемент холста. Браузеры, которые не поддерживают Canvas, будут игнорировать элементы холста и напрямую производить альтернативный контент, в то время как поддерживаемые браузеры обычно будут производить холст. Например, мы можем заполнить какой -то текст или изображения в холст в качестве альтернативного контента:
<canvas id = stockgraph ширина = 150 высот = 150> текущая цена акций: 3,15 долл. США +0,15 </canvas> <Canvas ID = ширина часов = 150 высот = 150> <img src = изображения/часы.
В реализации Apple Safari <Canvas> является элементом, реализованным во многом таким же образом <mg> is; У него нет конечного тега. Тем не менее, для того, чтобы <Canvas> имело широкое использование в Интернете, необходимо предоставить некоторые объекты для резервного контента. Следовательно, реализация Mozilla требует конечного тега (</canvas>).
В Apple Safari реализация <Canvas> очень похожа на <img>, и у нее нет конечного тега. Однако для того, чтобы <Canvas> широко применимо в веб -мире, необходимо предоставить место для альтернативного контента, поэтому необходимо прекратить тег (</canvas>) в реализации Mozilla.
Если запасной контент не требуется, простой <canvas id = foo ...> </canvas> будет полностью совместим с Safari и Mozilla - Safari просто игнорирует конечную метку.
Если нет замены, <canvas id = foo ...> </canvas> полностью совместим с Safari и Mozilla - Safari просто игнорирует конечную метку.
Если требуется резервный контент, некоторые уловки CSS должны быть использованы для маскировки запасного контента из Safari (что должно отображать только холст), а также для маскировки самих хитростей CSS из IE (что должно представлять контент за отстранение).
Если есть альтернативный контент, вы можете использовать некоторые трюки CSS, чтобы скрыть альтернативный контент для и только для Safari, потому что этот альтернативный контент должен отображаться в IE, но не в Safari.
<Canvas> создает поверхность чертежа с фиксированным размером, которая обнажает один или несколько контекстов рендеринга , которые используются для создания и манипулирования показанным содержанием. Мы сосредоточимся на контексте 2D рендеринга, который является единственным в настоящее время определенным контекстом рендеринга. В будущем другие контексты могут предоставлять различные типы рендеринга; Например, вполне вероятно, что будет добавлен 3D -контекст, основанный на ES OpenGL.
Экран рисования фиксированного размера, созданный <Canvas>, открывает один или несколько контекстов рендеринга , через которые мы можем управлять тем, что отображать. Мы сосредоточены на 2D -рендеринге, который также является единственным вариантом в настоящее время, и можем добавить трехмерный контекст на основе OpenGL ES в будущем.
<Canvas> изначально пуст и отобразить что -то, что сценарий сначала должен получить доступ к контексту рендеринга и нарисовать на него. Элемент Canvas имеет метод DOM, называемый GetContext, используемый для получения контекста рендеринга и его функций рисования. getContext () принимает один параметр, тип контекста.
Инициализация <Canvas> пустая. Чтобы нарисовать сценарий, он сначала требует его контекста рендеринга. Это может быть получено с помощью метода GetContext объекта Canvas Element. В то же время некоторые функции получаются для рисования. getContext () принимает значение, которое описывает его тип как аргумент.
var canvas = document.getElementbyId ('turniory'); var ctx = canvas.getContext ('2d');В первой строке мы извлекаем узел Canvas DOM, используя метод GetlementByID. Затем мы можем получить доступ к контексту чертежа, используя метод GetContext.
Первая строка выше получает узел DOM объекта Canvas через метод GetElementByID. Затем контекст операции чертежа получается с помощью метода GetContext.
Запасной контент отображается в браузерах, которые не поддерживают <Canvas>; Сценарии также могут проверить поддержку при выполнении. Это можно легко сделать, тестируя метод GetContext. Наш фрагмент кода свыше становится чем -то вроде этого:
В дополнение к отображению альтернативного содержимого в неподдерживаемых браузерах, вы также можете проверить, поддерживает ли браузер холст через сценарии. Метод очень прост, просто судите, существует ли GetContext.
var canvas = document.getElementbyId ('turniory'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); // код рисования здесь} else {// Canvas-Unsupported Code здесь}Вот минималистичный шаблон, который мы будем использовать в качестве отправной точки для последующих примеров. Вы можете скачать этот файл для работы в вашей системе.
Мы начнем с следующего простейшего шаблона кода (необходимого для последующих примеров), и вы можете загрузить файл для использования локально.
<html> <Head> <Title> Canvas Tutorial </title> <script type = text/javascript> функция draw () {var canvas = document.getElementbyId ('turniory'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); }} </script> <style type = text/css> canvas {border: 1px solid black; } </style> </head> <body onload = drail ();> <canvas id = ширина учебника = 150 высот = 150> </canvas> </body> </html>Если вы посмотрите на сценарий, который вы увидите, я сделал функцию, называемую Draw, которая будет выполнена после завершения загрузки страницы (через атрибут Onload на теге тега). Эта функция также могла бы быть вызвана из SetTimeout, SetInterval или любой другой функции обработчика событий, как только страница была загружена в первую очередь.
Если вы осторожны, вы обнаружите, что я подготовил функцию, называемую Draw, которая будет выполнена один раз после загрузки страницы (установив свойство нагрузки тега тега), и, конечно, ее также можно вызвать в SetTimeout, SetInterval или других функциях обработки событий.
Для начала, вот простой пример, который приводит два пересекающихся прямоугольника, один из которых имеет альфа -прозрачность. Мы рассмотрим, как это работает более подробно в более поздних примерах.
Для начала давайте посмотрим на простой взгляд - нарисуем две интерпинированные прямоугольники, один из которых имеет альфа -прозрачный эффект. Мы дадим вам подробный взгляд на то, как это работает в следующем примере.
<html> <Head> <script type = application/x-javascript> function draw () {var canvas = document.getelementbyid (canvas); if (canvas.getContext) {var ctx = canvas.getContext (2d); ctx.fillstyle = rgb (200,0,0); ctx.fillrect (10, 10, 55, 50); ctx.fillstyle = rgba (0, 0, 200, 0,5); ctx.fillrect (30, 30, 55, 50); }} </script> </head> <body onload = drail ();> <canvas id = width canvas = 150 высот = 150> </canvas> </body> </html>