Комментарий: HTML5 представляет новую этикетку, а область, представленная этим лейблом, похожа на холст. Все ваши графические чертежи должны быть представлены на этом холсте в конце. С помощью этого тега графическая выразительность браузера была значительно улучшена. Flash и Silverlight чувствуют угрозу?
1. <Canvas> TagHTML5 представляет новый тег <Canvas>, область, представленная этим тегом, похожа на холст, и все ваши графические чертежи должны быть представлены на этом холсте в конце. С помощью этого тега графическая выразительность браузера была значительно улучшена. Flash и Silverlight чувствуют угрозу?
Ссылка новостей: Google утверждает, что браузер Chrome 7 будет ускоряться в 60 раз быстрее
Использование тега <Canvas> очень просто, следующим образом:
<Canvas>
Ваш браузер не поддерживает тег Canvas
</canvas>
Нет большой разницы между тегом <Canvas> и обычным HTML -тегом. Вы можете установить его ширину и высоту, и вы можете установить его цвет фона, стиль границы и т. Д. С помощью CSS.
Вы можете узнать больше о теге <Canvas> здесь.
Содержание в середине тега - это запасное содержание. Если браузер пользователя не поддерживает тег <canvas>, контент будет отображаться; Если браузер пользователя поддерживает тег <Canvas>, контент будет игнорироваться.
Приведенный выше код <Canvas> отображает следующий эффект:
Ваш браузер не поддерживает тег Canvas
Если вы используете браузер IE, вы можете увидеть только подсказку; Если вы используете Google Chrome или Firefox Browser, вы можете увидеть область красного квадрата.
2. Контекст рендеринга
На самом деле, мы не можем ничего сделать с тегом <canvas>. Студенты, которые играли в программирование Windows, знают, что при рисовании в Windows вы должны сначала получить контекст устройства DC, а при рисовании тега <Canvas> вам также необходимо получить контекст рендеринга. Наша графика не нарисована непосредственно на экране, а сначала в контексте (контекст), а затем освежается на экране.
Не по теме: зачем вам собирать концепцию с таким сложным контекстом? Из -за объекта контекста мы можем сделать различные графические устройства выглядеть одинаково в наших глазах. Нам нужно только сосредоточиться на рисовании, и позволить операционной системе и браузеру беспокоиться о других задачах. Честно говоря, превратите все виды бетона в единые абстракции, тем самым уменьшая наше бремя.
Получить контекст очень просто, вам нужны только две строки кода следующим образом:
var canvas = document.getElementById ('Tutorial');
var ctx = canvas.getContext ('2d');
Сначала получите объект Canvas, а затем вызовите метод GetContext объекта Canvas. Этот метод может пройти только в параметрах 2D в настоящее время. В ближайшем будущем он может поддерживать параметр 3D. Вы должны понимать, что это значит, давайте с нетерпением ждем этого.
Метод GetContext возвращает объект CanvasRenderingContext2D, то есть объект контекста рендеринга. Вы можете найти больше об этом здесь, все из которых являются некоторыми методами рисования.
3. Поддержка браузера
В дополнение к отображению альтернативного контента на этих непревзойденных браузерах, мы также можем проверить, поддерживает ли браузер холст через сценарии. Метод очень прост. Просто судите, существует ли функция GetContext. Код заключается в следующем:
var canvas = document.getElementById ('Tutorial');
if (canvas.getContext) {
Alert ("поддержка <canvas> Tag");
} еще {
Alert («не поддерживается <canvas> тег»);
}
4. Небольшой пример
Ниже пример движущихся линий вверх и вниз будет продемонстрирован с использованием функции чертежа HTML5. Конкретный код будет приведен в последующем содержании.
Ваш браузер не поддерживает тег <Canvas>, используйте браузер Chrome или Firefox