5 Спецификация представляет много новых функций, одним из самых захватывающих является элемент canvas . HTML5 canvas предоставляет способ рисовать графики через JavaScript, который прост в использовании, но мощный. Каждый элемент canvas имеет контекст (контекст) (подумайте как о странице на чертежной доске), где можно нарисовать любую форму. Браузер поддерживает несколько контекстов холста и обеспечивает графические функции чертежа через разные. Обеспечивает функцию графического чертежа. 5 Спецификация представляет много новых функций, одним из самых захватывающих является элементы. HTML5 предоставляет метод рисования графики через JavaScript, который прост в использовании, но мощный. Каждый элемент имеет контекст (контекст) (подумайте как о странице на чертежной доске), где можно нарисовать любую форму. Браузер поддерживает несколько контекстов холста и обеспечивает графические функции чертежа через разные.
Большинство браузеров поддерживают 2D Canvas Contexts, включая Opera, Firefox, Konqueror и Safari. Кроме того, некоторые версии Opera также поддерживают 3D-холст, а Firefox также может поддерживать 3D-холст через плагины:
Контекст статьи
Эта статья представляет 2D -холст
Основы и как использовать основные функции холста, такие как строки, формы, изображения и текст. Чтобы понять эту статью, вам лучше понять основы JavaScript.
Вы можете нажать здесь, чтобы загрузить пример кода в этой статье в партиях
Метод создания Canvas очень прост, вам просто нужно добавить элемент <canvas> на страницу HTML:
<canvas id=mycanvas width=300 height=150>fallback content, in case the browser does not support canvas.</canvas>Чтобы иметь возможность ссылаться на элементы в JavaScript, лучше всего установить идентификатор для элемента; Он также должен установить высоту и ширину для холста.
После создания холста давайте подготовим кисть. Чтобы нарисовать график на холсте, вам нужно использовать JavaScript. Сначала найдите холст через функцию getelementbyid
Элемент, затем инициализируйте контекст. Различная графика может быть нарисована позже, используя контекст API. Следующий сценарий рисует прямоугольник на холсте (нажмите здесь, чтобы просмотреть эффект):
// get a reference to the element.var elem = document.getelementbyid('mycanvas');// always check for properties 和methods, to make sure your code doesn't break // in other browsers.if (elem && elem.getcontext) { // get the 2d context. // remember: you can only initialize one context per element. var context = elem.getcontext('2d'); if (context) { // you are done! now you can draw your first rectangle. // you only need to provide the (x,y) coordinates, followed by the width and // height dimensions. context.fillrect(0, 0, 150, 100); }} Вы можете поместить вышеупомянутый код в head документа или внешний файл.
После представления того, как создать холст, давайте посмотрим на 2D Canvas API и посмотрим, что можно сделать с этими функциями.
Приведенный выше пример показывает, как легко нарисовать прямоугольник.
Свойства FillStyle и Strokestyle можно легко установить для прямоугольного заполнения и линий. Метод использования значения цвета и шестнадцатеричное число, (), () и () (если браузер поддерживает его, например, опера
10 и Firefox 3). () (Если браузер поддерживает его, например, Opera10 и Firefox 3). () и () (если браузер поддерживает его, например, Opera10 и Firefox 3). (), () и () (если браузер поддерживает его, например, Opera10 и Firefox 3). Шестнадцатеричные числа, (), () и () (если поддерживаются браузером, таким как Opera10 и Firefox 3).
fillrect может быть использовано для привлечения прямоугольника. Используйте strokerect , чтобы нарисовать прямоугольники только с границами и без заполнения. Если вы хотите очистить холст, вы можете использовать clearrect . Параметры вышеупомянутых трех методов одинаковы: x , y , ширина , высота . Первые два параметра устанавливают координаты (x, y), а последние два параметра устанавливают высоту и ширину прямоугольника.
Вы можете использовать атрибут ширины Line , чтобы изменить толщину линии. Посмотрим, используется ли fillrect ,
strokerect clearrect и другие примеры:
context.fillstyle = '#00f'; // bluecontext.strokestyle = '#f00'; // redcontext.linewidth = 4;// draw some rectangles.context.fillrect (0, 0, 150, 50);context.strokerect(0, 60, 150, 50);context.clearrect (30, 25, 90, 60);context.strokerect(30, 25, 90, 60);Этот пример рендеринг показан на рисунке 1.
Рисунок 1: Заполнение, Строкек и
Диаграмма эффекта четкого эффекта
Произвольные формы могут быть проведены по пути холста (путь). Сначала вы можете нарисовать контур, затем нарисовать границу и заполнить. Создать пользовательскую форму простой, начните рисовать с помощью beginpath() , а затем нарисуйте свою фигуру с прямыми линиями, кривыми и другой графикой. После рисования вызовите fill и stroke , чтобы добавить или установить границы. Позвоните в closepath() чтобы закончить пользовательский графический рисунок.
Вот пример рисования треугольника:
// set the style properties.context.fillstyle = '#00f';context.strokestyle = '#f00';context.linewidth = 4;context.beginpath();// start from the top-left point.context.moveto(10, 10); // give the (x,y) coordinatescontext.lineto(100, 10);context.lineto(10, 100);context.lineto(10, 10);// done! now fill the shape, 和draw the stroke.// note: your shape will not be visible until you call any of the two methods.context.fill();context.stroke();context.closepath();Рендеринги показаны на рисунке 2.
Рисунок 2: Треугольник
Другой более ответственный пример использует прямые линии, кривые и дуги.
Метод drawimage позволяет вставлять другие изображения в холст
( img и canvas Elements). В операторе вы можете рисовать графику SVG на холсте. Этот метод довольно сложный и может иметь 3, 5 или 9 параметров:
drawimage . Один параметр указывает положение изображения, а два других параметра указывают положение изображения в холсте.drawimage , включая 3 параметра, упомянутые выше, добавьте два параметра, чтобы указать ширину и высоту изображения вставки (если вы хотите изменить размер изображения).drawimage , включая вышеуказанные параметры, а остальные 4 параметра устанавливают положение и ширину высоты в исходном изображении. Эти параметры позволяют динамически обрезать исходное изображение перед его отображением.Вот три примера приведенных выше методов использования:
// three arguments: the element, destination (x,y) coordinates.context.drawimage( img_elem , dx , dy );// five arguments: the element, destination (x,y) coordinates, and destination // width and height (if you want to resize the source image).context.drawimage( img_elem , dx , dy , dw , dh );// nine arguments: the element, source (x,y) coordinates, source width and // height (for cropping), destination (x,y) coordinates, and destination width // and height (resize).context.drawimage( img_elem , sx , sy , sw , sh , dx , dy , dw , dh );Эффект показан на рисунке 3.
Рисунок 3: рендеринг drawimage .
2D Context API предоставляет три метода для операций на уровне пикселей: createimagedata , getimagedata и
putimagedata .
Объект imagedata сохраняет значение пикселя изображения. Каждый объект имеет три свойства: ширина , высота и
данные . Тип атрибута данных - CanVaspixelArray, который используется для хранения width * height *4 значения пикселя. Каждый пиксель имеет значение RGB и прозрачность альфа -значения (его значение от 0 до от 0 до от 0 до 0
255, включая Альфа!). Порядок пикселей хранится слева направо, сверху вниз, по ряду.
Чтобы лучше понять его принцип, давайте посмотрим на пример - рисовать красный прямоугольник
// create an imagedata object.var imgd = context.createimagedata(50,50);var pix = imgd.data;// loop over each pixel 和set a transparent red.for (var i = 0; n = pix.length, i < n; i += 4) { pix[i ] = 255; // red channel pix[i+3] = 127; // alpha channel}// draw the imagedata object at the given (x,y) coordinates.context.putimagedata(imgd, 0,0); Примечание: не все браузеры реализуют createimagedata . В поддерживаемых браузерах объект imagedata должен быть получен с помощью метода getimagedata . Пожалуйста, обратитесь к примеру кода.
Многие функции могут быть выполнены с помощью imagedata . Например, могут быть реализованы фильтры изображений, или могут быть реализованы математические визуализации (например, фракталы и другие спецэффекты). Следующие спецэффекты реализуют простой фильтр инверсии цвета:
// get the canvaspixelarray from the given coordinates and dimensions.var imgd = context.getimagedata( x , y , width , height );var pix = imgd.data;// loop over each pixel and invert the color.for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = 255 - pix[i ]; // red pix[i+1] = 255 - pix[i+1]; // green pix[i+2] = 255 - pix[i+2]; // blue // i+3 is alpha (the fourth element)}// draw the imagedata at the given (x,y) coordinates.context.putimagedata(imgd, x , y );На рисунке 4 показана опера после использования этого фильтра
Изображение (рисунок 3 - исходное изображение).
Рисунок 4: Фильтр инверсии цвета
Хотя недавняя версия Webkit и Firefox 3.1 Nightly Build только начали поддерживать текстовые API, чтобы обеспечить целостность статьи, я все еще решил представить текстовый API здесь.
Следующие свойства текста могут быть установлены в объекте context :
font : текстовый шрифт, то же самое Атрибут атрибута font-family
textalign : текстовый горизонтальный выравнивание. Желательные значения атрибутов: start , end , left , right , center . значение по умолчанию:
start .
textbaseline : вертикальное выравнивание текста. Желательные значения атрибутов: top , hanging , middle , alphabetic , ideographic , bottom . Значение по умолчанию: alphabetic .
Есть два способа нарисовать текст: filltext и stroketext . Первый рисует текст с заполнением заполнения , последний рисует текст только с границей в стиле удара . Параметры обоих одинаковы: текст, который будет нарисован, и координаты положения (x, y) текста. Существует также дополнительная опция - максимальная ширина. При необходимости браузер уменьшает текст в соответствии с указанной шириной.
Атрибут выравнивания текста влияет на текст и настройки
(x, y) относительная позиция координат.
Вот пример рисования Hello World Text в холсте
context.fillstyle = '#00f';context.font = 'italic 30px sans-serif';context.textbaseline = 'top';context.filltext ('hello world!', 0, 0);context.font = 'bold 30px sans-serif';context.stroketext('hello world!', 0, 50);Рисунок 5 - его рендеринг.
Рисунок 5: Текстовый эффект
В настоящее время только Konqueror и Firefox 3.1 Nightly Build Support Shadows API. Свойства 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);Эффект показан на рисунке 6.
Рисунок 6: Эффект тени холста - синий прямоугольник, красная тень
В дополнение к цвету CSS, свойства fillstyle и strokestyle могут быть установлены на объекты canvasgradient . - canvasgradient может использовать цветовые градиенты для линий и наполнения.
Чтобы создать объект canvasgradient , вы можете использовать два метода: createlineargradient и createradialgradient . Первый создает линейный цветовой градиент, а последний создает круглый цветовой градиент.
После создания объекта цветового градиента вы можете использовать метод addcolorstop объекта, чтобы добавить цветные промежуточные значения.
Следующий код демонстрирует, как использовать цветовые градиенты:
// you need to provide the source 和destination (x,y) coordinates // for the gradient (from where it starts 和where it ends).var gradient1 = context.createlineargradient( sx , sy , dx , dy );// now you can add colors in your gradient.// the first argument tells the position for the color in your gradient. the // accepted value range is from 0 (gradient start) to 1 (gradient end).// the second argument tells the color you want, using the css color format.gradient1.addcolorstop(0, '#f00'); // redgradient1.addcolorstop(0.5, '#ff0'); // yellowgradient1.addcolorstop(1, '#00f'); // blue// for the radial gradient you also need to provide source// 和destination circle radius.// the (x,y) coordinates define the circle center points (start 和// destination).var gradient2 = context.createradialgradient( sx , sy , sr , dx , dy , dr );// adding colors to a radial gradient is the same as adding colors to linear // gradients.Я также подготовил более сложный пример, используя линейные цветовые градиенты, тени и текст. Эффект показан на рисунке 7.
Рисунок 7: Пример использования линейного цветового градиента
Если вы хотите знать, что вы можете сделать с Canvas, обратитесь к следующему проекту:
эскиз
Демонстрация, открытый источник
полет
Canvas является одной из самых ожидаемых функций HTML5 и поддерживался большинством веб -браузеров. Canvas может помочь создать игры и улучшить графические пользовательские интерфейсы. 2D контекст
API предоставляет много возможностей для рисования графики - я надеюсь, что вы узнали об использовании Canvas через эту статью, и вы заинтересованы в изучении больше!