Спецификация HTML5 представляет множество новых функций, одним из самых захватывающих является элемент Canvas. HTML 5 Canvas предоставляет способ провести графику через JavaScript, который прост в использовании, но мощный. Каждый элемент Canvas имеет контекст (контекст) (подумайте как о странице на чертежной доске), где можно нарисовать любую форму. Браузер поддерживает несколько контекстов холста и предоставляет графические возможности рисования с помощью различных API. Большинство браузеров поддерживают 2D Canvas Contexts, включая Opera, Firefox, Konqueror и Safari. Кроме того, некоторые версии Opera также поддерживают 3D-холст, а Firefox также может поддерживать 3D-холст через плагины.
В этой статье представлены основы 2D -холста и как использовать основные функции холста, такие как строки, формы, изображения и текст. Чтобы понять эту статью, вам лучше понять основы JavaScript.
Вы можете нажать здесь, чтобы загрузить пример кода в этой статье в партиях
| Гиперссылки в примерах в этой статье - все веб -страницы HTML5. В настоящее время браузеры, которые поддерживают HTML5, включают Chrom, Firefox 3.6 и т. Д. IE, в настоящее время не поддерживает HTML5, что означает, что вы не можете видеть гиперссылки в некоторых примерах этой страницы, используя IE. |
Основы холста:
Метод создания Canvas прост, вам просто нужно добавить элемент <Canvas> на страницу HTML:
<canvas id = ширина mycanvas = 300 высота = 150>
Запасное содержание, в случае, если браузер не поддерживает холст.
</canvas>
Чтобы ссылаться на элементы в JavaScript, лучше всего установить идентификатор элемента; Вы также должны установить высоту и ширину холста.
После создания холста давайте подготовим кисть. Чтобы нарисовать график на холсте, вам нужно использовать JavaScript. Сначала найдите элемент Canvas через функцию GetElementByID, а затем инициализируйте контекст. Затем можно нарисовать различную графику, используя контекстный API. Следующий сценарий рисует прямоугольник на холсте (нажмите здесь, чтобы просмотреть эффект):
// Получить ссылку на элемент.
var elem = document.getElementById ('myCanvas');
// всегда проверяйте свойства и методы, чтобы убедиться, что ваш код не сломается
// в других браузерах.
if (elem && elem.getContext) {
// Получить 2D контекст.
// Помните: вы можете инициализировать только один контекст на элемент.
var context = elem.getContext ('2d');
if (context) {
// ты закончил! Теперь вы можете нарисовать свой первый прямоугольник.
// вам нужно только предоставить координаты (x, y), за которым следует ширина и
// размеры высоты.
context.fillrect (0, 0, 150, 100);
}
}
Вы можете поместить вышеупомянутый код в часть документа или внешний файл.
2D Context API:
После представления того, как создать холст, давайте посмотрим на 2D Canvas API, чтобы увидеть, что можно сделать с этими функциями.
Основные строки:
Приведенный выше пример показывает, как легко нарисовать прямоугольник.
Свойства FillStyle и Strokestyle можно легко установить для прямоугольного заполнения и линий. Значение цвета используется так же, как CSS: шестнадцатеричное число, rgb (), rgba () и hsla. Заполнение может быть использовано для рисования прямоугольника с заполнением. Используйте Strokerect, чтобы нарисовать прямоугольники только с границами и без заполнения. Если вы хотите очистить холст, вы можете использовать ClearRect. Параметры вышеупомянутых трех методов одинаковы: x, y, ширина, высота. Первые два параметра устанавливают координаты (x, y), а последние два параметра устанавливают высоту и ширину прямоугольника. Вы можете использовать свойство ширины линии, чтобы изменить толщину линии. Давайте посмотрим на примеры, используя FillRect, Strokerect ClearRect и другие:
context.fillstyle = '#00f'; // синий
context.strokestyle = '#f00'; // красный
context.linewidth = 4;
// Нарисуйте несколько прямоугольников.
context.fillrect (0, 0, 150, 50);
Context.strokerect (0, 60, 150, 50);
context.clearrect (30, 25, 90, 60);
Context.strokerect (30, 25, 90, 60);
Этот пример рендеринг показан на следующем рисунке:
путь:
Произвольные формы могут быть проведены по пути холста (путь). Сначала вы можете нарисовать контур, затем нарисовать границу и заполнить. Создать пользовательскую форму простой, начните рисовать с помощью starmpath (), а затем нарисуйте свою фигуру с прямыми линиями, кривыми и другой графикой. После рисования вызовите заполнение и удары, чтобы добавить или установить границы. Позвоните в loePath (), чтобы закончить пользовательский графический рисунок. Вот пример рисования треугольника:
// Установить свойства стиля.
context.fillstyle = '#00f';
context.strokestyle = '#f00';
context.linewidth = 4;
context.beginpath ();
// начинать с верхней левой точки.
context.moveto (10, 10); // Дайте координаты (x, y)
context.lineto (100, 10);
context.lineto (10, 100);
context.lineto (10, 10);
// Сделанный! Теперь заполните форму и нарисуйте ход.
// Примечание: ваша форма не будет видна, пока вы не вызовуте ни один из двух методов.
context.fill ();
Context.Stroke ();
context.closepath ();
Рендеринги показаны на следующем рисунке:
Другой более сложный пример использует прямые линии, кривые и дуги.
Вставьте изображение:
Метод рисования позволяет вставлять другие изображения (IMG и элементы холста) в холст. В Opera вы можете рисовать графику SVG на холсте. Этот метод более сложный и может иметь 3, 5 или 9 параметров
3 Параметры: самый базовый метод использования DrawMage. Один параметр указывает положение изображения, а два других параметра указывают положение изображения в холсте.
5 Параметры: метод использования промежуточного рисования, включая 3 параметра, упомянутые выше, добавьте два параметра, чтобы указать ширину и высоту изображения вставки (если вы хотите изменить размер изображения).
9 Параметры: Наиболее сложным рисунком является метод смешанного использования, включая приведенные выше 5 параметров, а другие 4 параметра устанавливают положение и ширину высоты в исходном изображении. Эти параметры позволяют динамически обрезать исходное изображение перед его отображением.
Вот три примера приведенных выше методов использования:
// три аргумента: Координаты элемента, пункт назначения (x, y).
context.drawimage (img_elem, dx, dy);
// Пять аргументов: Координаты элемента, пункт назначения (x, y) и назначение
// Ширина и высота (если вы хотите изменить размер исходного изображения).
context.drawimage (img_elem, dx, dy, dw, dh);
// девять аргументов: координаты элемента, источник (x, y), ширина источника и
// высота (для обрезки), координаты назначения (x, y) и ширина назначения
// и высота (изменение размера).
context.drawimage (img_elem, SX, SY, SW, SH, DX, DY, DW, DH);
Эффект показан на рисунке ниже:
Операция на уровне пикселей:
2D Context API предоставляет три метода для операций на уровне пикселей: CreateImagedata, Getimagedata и Putimagedata. Объект Imagedata сохраняет значение пикселя изображения. Каждый объект имеет три свойства: ширина, высота и данные. Тип атрибута данных - CanVaspixelArray, который используется для хранения ширины*высоты*4 значения пикселя. Каждый пиксель имеет значение RGB и альфа -значение прозрачности (его значения составляют от 0 до 255, включая альфа!). Порядок пикселей хранится слева направо, сверху вниз, по ряду. Чтобы лучше понять его принцип, давайте посмотрим на пример - нарисуйте красный прямоугольник:
// Создать объект ImageData.
var imgd = context.createimagedata (50,50);
var pix = imgd.data;
// Перевернуть через каждый пиксель и установить прозрачный красный.
for (var i = 0; n = pix.length, i <n; i += 4) {
pix [i] = 255; // Красный канал
pix [i+3] = 127; // Альфа -канал
}
// Нарисуйте объект ImageData в заданных (x, Y) координатах.
context.putimagedata (imgd, 0,0);
Примечание: не все браузеры реализуют CreateImagedata. В поддерживаемых браузерах объект ImageData должен быть получен с помощью метода GetImagedata. Пожалуйста, обратитесь к примеру кода.
Imagedata может использоваться для выполнения многих функций. Например, могут быть реализованы фильтры изображений, или могут быть реализованы математические визуализации (например, фракталы и другие спецэффекты). Следующие спецэффекты реализуют простой фильтр инверсии цвета:
// Получить CanVaspixelArray из заданных координат и размеров.
var imgd = context.getimagedata (x, y, width, высота);
var pix = imgd.data;
// Перевернуть через каждый пиксель и инвертировать цвет.
for (var i = 0, n = pix.length; i <n; i += 4) {
pix [i] = 255 - pix [i]; // красный
pix [i+1] = 255 - pix [i+1]; // зеленый
pix [i+2] = 255 - pix [i+2]; // синий
// i+3 - альфа (четвертый элемент)
}
// Нарисуйте Imagedata в заданных (x, y) координатах.
context.putimagedata (imgd, x, y);
На следующем рисунке показан эффект после использования этого фильтра:
Слово:
Хотя недавняя версия Webkit и Firefox 3.1 Nightly Build только начали поддерживать текстовый API, чтобы обеспечить целостность статьи, я все еще решил представить текстовый API здесь.
Следующие свойства текста могут быть установлены в объекте контекста:
Шрифт: текстовый шрифт, такой же, как атрибут семьи CSSFONT
Textalign: текстовый горизонтальный выравнивание. Желательные значения атрибутов: начало, конец, слева, справа, в центре. Значение по умолчанию: начало.
Textbaseline: вертикальное выравнивание текста. Желательные значения атрибутов: вверху, подвес, средний, алфавитный, идеографический, внизу. Значение по умолчанию: алфавит
Есть два способа нарисовать текст: Filltext и Stroketext. Первый рисует текст с заполнением заполнения, последний рисует текст только с границей Strokestyle. Параметры обоих одинаковы: текст, который будет нарисован, и координаты положения (x, y) текста. Существует также дополнительная опция - максимальная ширина. При необходимости браузер уменьшает текст в соответствии с указанной шириной. Атрибут выравнивания текста влияет на относительную позицию текста в координатах набора (x, y).
Вот пример рисования Hello World Text в холсте:
context.fillstyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textbaseline = 'top';
context.filltext («Привет, мир!», 0, 0);
context.font = 'Bold 30px sans-serif';
context.stroketext («Привет, мир!», 0, 50);
Следующая картина - его рендеринг:
тень:
В настоящее время только Konqueror и Firefox 3.1 Nightly Build поддерживают API Shadows. Свойства API:
Shadowcolor: тень. Его значение соответствует значению цвета CSS.
Shadowblur: устанавливает степень тени размытия. Чем больше это значение, тем более размытым тенью. Его эффект такой же, как и гауссовый нечеткий фильтр Photoshop.
ShadowOffSetx и ShadowOffSety: x и y -смещения тени, в пикселях.
Вот пример тени холста:
context.shadowoffsetx = 5;
context.shadowoffsety = 5;
context.shadowblur = 4;
context.shadowcolor = 'rgba (255, 0, 0, 0,5)';
context.fillstyle = '#00f';
Context.FillRect (20, 20, 150, 100);
Эффект показан на рисунке ниже:
Цветовой градиент:
В дополнение к цветам CSS, свойства FillStyle и Strokestyle могут быть установлены на объекты Canvasgradient. -Колур можно использовать для линий и заполнения через холста. Чтобы создать объект Canvasgradient, вы можете использовать два метода: CreateLinearGradient и CreateRadialGradient. Первый создает линейный цветовой градиент, а последний создает круглый цветовой градиент. После создания объекта цветового градиента вы можете использовать метод AddColorStop объекта, чтобы добавить цветные промежуточные значения. Следующий код демонстрирует, как использовать цветовые градиенты:
// вам необходимо предоставить координаты источника и назначения (x, y)
// для градиента (откуда он начинается и где он заканчивается).
var Gradient1 = context.createlinearGradient (SX, SY, DX, DY);
// Теперь вы можете добавить цвета в свой градиент.
// Первый аргумент рассказывает о позиции для цвета в вашем градиенте. А
// Принятый диапазон значений составляет от 0 (запуск градиента) до 1 (градиент конец).
// Второй аргумент рассказывает о цвете, который вы хотите, используя формат цвета CSS.
gradient1.addcolorstop (0, '#f00'); // красный
gradient1.addcolorstop (0,5, '#ff0'); // желтый
gradient1.addcolorstop (1, '#00f'); // синий
// для радиального градиента вам также необходимо предоставить источник
// и радиус круга назначения.
// координаты (x, y) определяют центральные точки кружков (запуск и
// место назначения).
var Gradient2 = context.createradialGradient (SX, SY, SR, DX, DY, DR);
// добавление цветов в радиальный градиент - это то же самое, что добавление цвета в линейные
// градиенты.
Я также подготовил более сложный пример, используя линейные цветовые градиенты, тени и текст.
Эффект показан на рисунке ниже:
холст демонстрация:
Если вы хотите знать, что вы можете сделать с Canvas, обратитесь к следующему проекту:
Оперный виджет:
Simaquarium
Секщита художника
Спирограф
Онлайн -инженер и демонстрация:
Ньютон Полином
Canvascape - 3D Walker
Paint.Web - покраска демонстрация, с открытым исходным кодом
Полез звездного поля
Интерактивный каплей
Подраздел:
Canvas является одной из самых ожидаемых функций HTML 5 и в настоящее время поддерживается большинством веб -браузеров. Canvas может помочь создать игры и улучшить графические пользовательские интерфейсы. 2D контекст
API предоставляет много возможностей графического рисунка - я надеюсь, что вы узнали об использовании Canvas через эту статью, и вы заинтересованы в изучении больше!