Комментарий: все знают, что не все браузеры в настоящее время поддерживают HTML5. Даже браузеры, которые поддерживают HTML5, могут не поддерживать все новые функции HTML5. Рекомендуется использовать Firefox (фаворит разработчиков) или Chrome Browser. Все мои примеры разработаны на основе Firefox.
Начиная с сегодняшнего дня, мы начнем серию курсов на холсте HTML5. Эта серия - мое резюме после прочтения «HTML5 Canvas: нативная интерактивность и анимация для Интернета». Заинтересованные друзья могут скачать оригинальные книги по английскому языку для чтения. Эта книга показывает нам мощные функции холста, введя разработку холста. Я думаю, что это довольно хорошо. Я узнал много знаний о холсте, прочитав эту книгу. На самом деле, в самом холсте не так много API. Ключ должен учиться и использовать их активно и научиться создавать невероятные результаты для сочетания API. И эта книга - ваш лучший выбор для обучения холста. Жаль, что у него еще нет китайской версии. Друзья с бедным английским могут только ждать.Как мы все знаем, не все браузеры в настоящее время поддерживают HTML5, и даже браузеры, которые поддерживают HTML5, могут не обязательно поддерживать все новые функции HTML5. Таким образом, каждый должен выбрать относительно новый браузер в качестве среды отладки. Рекомендуется использовать Firefox (любимый разработчик) или Chrome Browser. Все мои примеры разработаны на основе Firefox.
Я не буду представлять базовые знания, связанные с HTML5 здесь. В Интернете есть много учебных пособий о HTML5, поэтому я могу научиться это самостоятельно. Чтобы выучить html5, вам нужно иметь лучшую основу в JavaScript. Вы можете пойти в блог дяди Тома, чтобы узнать: На самом деле, эта серия курсов довольно сложна. Если вы хорошо изучаете более 50 статей, вас следует считать экспертом JS.
Теперь мы официально начинаем наш курс Canvas, первый пример: Hello Canvas.
Во -первых, вам нужно добавить тег холста в тело следующим образом:
<Canvas>
Ваш браузер не поддерживает холст HTML5.
</canvas>
Текстовая часть в холсте будет отображаться, когда браузер не поддерживает объект Canvas.
Тэг холста определен. Когда нам нужно управлять им через JS, он может быть реализован через GetElementByID.
var thecanvas = document.getElementById (Canvasone); Сейчас мы привыкли использовать jQuery для разработки задач, так как же получить объект Canvas с помощью jQuery?
var canvas = $ ('#canvasone'). get (0); или var canvas = $ ('#canvasone') [0]; Я не знаю, что Get (0) и [0] его нет. Если вы не используете метод get () или индекс [], ваш код JS не сможет работать на холсте. Потому что $ ('#canvasone') получает объект jQuery, а то, что мы на самом деле хотим работать, - это объект HTML DOM. Существует проблема, в которой объект jQuery преобразуется в объект DOM, и это преобразование завершено через get () или индекс. Если вам нужно преобразовать объект DOM в объект jQuery, вы можете использовать метод $ () для его реализации. У моего друга, который не ясно об этом, есть единственный, кто отправляется на Байду сам, поэтому я не буду подробно это вдаваться в это.
Чтобы обеспечить надежность кода, мы должны определить, поддерживает ли ваш браузер объекты Canvas, которые могут быть реализованы через следующий код.
if (! Thecanvas ||! Thecanvas.getContext) {
возвращаться;
}
Тем не менее, рекомендуется использовать библиотеку Modernizr.js для завершения этой работы. Это очень пассивная библиотека HTML5 JS и предоставляет много полезных методов.
function canvassupport () {
вернуть modernizr.canvas;
}
Canvas поддерживает 2D рендеринг и реализуется через следующий код:
var context = thecanvas.getContext (2d);
Далее мы можем нарисовать изображение на холсте через контекстный объект.
// Установить цвет области
context.fillstyle = "#ffffa";
// Нарисуйте область
context.fillrect (0, 0, 500, 300);
// Установить шрифт
context.font = "20px _sans";
// Установить вертикальное выравнивание
context.textbaseline = "top";
// рисовать текст
context.filltext («Привет, мир!», 195, 80);
// установить цвет границы
context.strokestyle = "#000000";
// Нарисуйте границу
Context.strokerect (5, 5, 490, 290);
Рисунок изображения описан ниже. Из -за асинхронной загрузки изображения, чтобы убедиться, что при рисовании изображения с холстом изображение было загружено, мы используем следующий метод:
var helloworldimage = new Image ();
helloworldimage.src = "helloworld.gif";
helloworldimage.onload = function () {
context.drawimage (helloworldimage, 160, 130);
}
Когда изображение будет закончено, событие Onload будет запускается, и изображение будет нарисовано с использованием объекта контекста.
Все загружают демонстрацию, чтобы увидеть полный код. Адрес демонстрации: html5canvas.helloworld.zip