Комментарий: Что такое Canvas <canvas> - это новый HTML -элемент, который определяется в HTML5. Этот элемент обычно можно использовать для рисования графики, синтеза изображений и т. Д. На HTML -страницах через JavaScript, а также можно использовать для создания некоторых анимаций. Конечно, в настоящее время html5
Что такое холст
<Canvas> - новый HTML -элемент, который определяется в HTML5. Этот элемент обычно можно использовать для рисования графики, синтеза изображений и т. Д. На HTML -страницах через JavaScript, а также можно использовать для создания некоторых анимаций. Конечно, спецификация HTML5 все еще находится на стадии проекта, и может потребоваться до 2010 года, чтобы быть официально выпущенным, но теперь многие браузеры уже поддержали некоторые спецификации HTML5. В настоящее время браузеры, которые поддерживают элементы холста, включают Firefox3+, Safari4, Chrome 2.0+ и т. Д., Поэтому при запуске примеров на этой странице убедитесь, что вы используете один из вышеуказанных браузеров.
Хотя у меня было много учебных пособий по холсту в Мозилле, я решил записать свой учебный процесс. Если вы думаете, что я недостаточно понимаю, вы можете найти ссылку на учебник Canvas на веб -сайте Mozilla в справочных материалах.
Кроме того, здесь можно найти некоторые интересные примеры холста.
Начните с холстом
Использовать холст просто. Так же, как использование других элементов HTML, вам просто нужно добавить тег <Canvas> на страницу:
<Canvas> </canvas>
Конечно, это просто простое создание объекта Canvas и не выполняет никаких операций. В настоящее время элемент Canvas выглядит ничем не отличается от элемента Div, и на странице ничего не видно :)
Кроме того, размер элемента холста может быть указан по атрибутам ширины и высоты, что несколько похоже на элемент IMG.
Ядро холста: контекст
Как упоминалось ранее, вы можете управлять объектами Canvas через JavaScript для рисования графики, изображений синтеза и т. Д. Эти операции не выполняются через сам объект Canvas, но выполняются с помощью метода объекта Canvas для получения контекста операции Canvas. Другими словами, в процессе использования объекта Canvas мы имеем дело с контекстом объекта Canvas, и сам объект Canvas может использоваться для получения информации, такой как размер объекта Canvas.
Очень просто получить контекст объекта Canvas. Просто вызовите метод GetContext элемента Canvas. При вызове вам нужно передать параметр типа контекста. Единственное значение типа, которое можно использовать и может быть использован, - 2D:
Firefox3.0.x смущение
Хотя Firefox3.0.x поддерживает элементы холста, он не полностью реализован в соответствии со спецификацией. Методы FillText и MeasureText в спецификации заменяются несколькими специфическими методами Firefox в Firefox3.0.x. Поэтому при использовании Canvas в Firefox3.0.x вам необходимо сначала исправить различия между этими методами в разных браузерах.
Следующий код взят из проекта Mozillabespin, который исправляет несоответствие между контекстным объектом холста в Firefox3.0.x и спецификацией HTML5:
ПРИМЕЧАНИЕ. До Opera 9.5 Opera не поддерживает Filltext объекта Canvas и связанные с ним методы и свойства в спецификации HTML5.
Привет, холст!
После некоторого предварительного понимания холста мы начали писать нашу первую программу Canvas, еще одну ветвь знаменитого Helloworld Hello, Canvas:
Запустите пример, область, где находится объект Canvas, показывает Hello, World!, Что является именно функцией CTX.FillText (Привет, мир!, 20,20); в коде.
Filltext и связанные с ними свойства
Метод Filestext используется для отображения текста в холсте. Он может принять четыре параметра, последний не является обязательным:
VoidFillText (IndomStringText, InfoAtx, Infoatey, [необязательно] infoatmaxwidth);
Где MaxWidth представляет максимальную ширину при отображении текста, что может предотвратить переполнение текста. Тем не менее, в своих тестах я обнаружил, что максимальная мощность не эффективна при указании максимальной прогибы в Firefox и Chomre.
Перед использованием метода FillText вы можете настроить шрифт текста, установив свойство шрифта контекста. В приведенном выше примере я использовал 20ptarial в качестве шрифта текста. Вы можете установить разные значения самостоятельно, чтобы увидеть конкретный эффект.
Заканчивать
Это все сейчас. Я напишу эту серию во время чтения спецификаций :)
Ссылки
1. HTML5 Canvas, новый этап для языка сценариев, Hred
2
3. Canvastututureorial китайский, Mozilla
4. Канвастауториальный английский, Мозилла
5. Canvassupportinopera, Opera