Canvas (англ. canvas — «холст», рус. канва́с) — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптов, обычно на языке JavaScript[]. Начало отсчёта блока находится слева сверху. От него и строится каждый элемент блока[]. Размер пространства координат не обязательно отражает размер фактической отображаемой площади[]. По умолчанию его ширина равна тремстам пикселям, а высота ста пятидесяти[].
Используется, как правило, для отрисовки графиков для статей и игрового поля в некоторых браузерных играх. Но также может использоваться для встраивания видео в страницу и создания полноценного плеера.
Используется в WebGL для аппаратного ускорения 3D графики[].
Компанией Google была выпущена JavaScript библиотека explorercanvas, которая позволяла работать с Canvas в браузерах IE7 и IE8.
Canvas может усложнить задачу роботам по распознаванию Капчи. При использовании canvas с сервера загружается не картинка, а набор точек (или алгоритм прорисовки), по которым браузер прорисовывает картинку (капчу
canvas позволяет разместить на холсте: картинку, видео, текст. Залить всё это сплошным цветом, либо обвести контуры или даже добавить градиент[]. Добавление теней похожих на свойства css3 box-shadow и text-shadow. И, наконец, отрисовка фигур с помощью указания контрольных точек. Причём можно изменять как ширину линий, так и кисть рисовки линий, стиль соединений линий
Ниже приводится полная документация в формате таблицы с методами или параметрами слева и описанием справа[].
Большинство библиотек использует API SVGMatrix объектов, а не этот, который остаётся, главным образом, по историческим причинам[
.width [ = value ] Возвращает ширину холста в пикселях canvas.width = 900px .height [ = value ] Возвращает высоту холста в пикселях canvas.height = 900px
.getContext('2d') Вернёт объект двумерного контекста. 'webgl' вернёт объект WebGLRenderingContext var context = canvas.getContext('2d'); .probablySupportsContext( contextId ) Если .getContext() был вызван вернет false, true в противном случае if (canvas.probablySupportsContext( contextId )) { context = canvas.getContext('2d'); } .setContext( context ) Устанавливает контекст холста context.setContext( context ) .transferControlToProxy() Вернёт объект, позволяющий передать управление другому документу. Выдаст исключение, если использовались .getContext() и .setContext() context.transferControlToProxy()
.canvas() Вернет canvas, если контекст был получен через getContext() var canvas = context.canvas(); .commit() Отображает кадр из буфера context.commit(); .save() Сохраняет текущие настройки в стек context.save(); .restore() Достает из стека настройки отображения канвы context.restore(); .lineWidth [ = value ] Возвращает текущую ширину линии context.lineWidth = 100; .lineCap [ = value ] Возвращает тип начертательного пера context.lineCap = "butt"; .lineJoin [ = value ] Возвращает строку со стилем context.lineJoin = "hurt" .miterLimit [ = value ] Толщина соединения линий context.miterLimit = 40 .setLineDash( template ) Устанавливает шаблон штрихов линии context.setLineDash .getLineDash() Возвращает установленный шаблон штрихов линии context.lineJoin .lineDashOffset [ = value ] Возвращает отступ от линии context.lineDashOffset = 4;
.font [ = value ] Возвращает настройки шрифта, аналогично CSS правилу context.font = "normal 16pt Sans-Serif"; .textAlign [ = value ] Возвращает выравнивание текста context.textAlign = "center"; .textBaseline [ = value ] Возвращает настройки базовой линии context.textBaseline = "top"; .direction [ = value ] Возвращает текущее направление текста context.direction = "ltr"; .fillText() Рисует закрашенный текст context.fillText() .strokeText() Рисует контур текста context.strokeText() .addText(text, styles, transform, x, y [, maxWidth ]) Рисует указанный текст context.addText("Hello, World!", "normal 16pt Sans", svgtrans, 90, 10) .addPathByStrokingText(text, styles, transform, x, y [, maxWidth ]) Рисует указанный текст context.addPathByStrokingText("Hello, World!", "normal 16pt Sans", svgtrans, 90, 10)
.moveTo( x, y ) Перемещает точку в указанное место context.moveTo(20, 20) .beginPath() Начать строить фигуру context.beginPath() .closePath() Замкуть контур фигуры context.closePath() .lineTo( x, y ) Связывает две точки между собой context.lineTo(20, 20) .rect( x, y, width, height ) Рисует прямоугольник context.rect(20, 20, 300, 400) .arc( x, y, radius, startAngle, endAngle [, anticlockwise ] ) Рисует дугу - в том числе -окружность context.arc(20, 20, 500, 0, 50) .quadraticCurveTo( cpx, cpy, x, y ) Кривая Безье по двум точкам context.quadraticCurveTo(20, 20, 40, 50) .ellipse( x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise] ) Рисует эллипс context.ellipse(20, 20, 40, 90, 9, 0, 50) .bezierCurveTo( cp1x, cp1y, cp2x, cp2y, x, y ) Создает кривую Безье по трем точкам context.bezierCurveTo(20, 20, 90, 90, 50, 50) .arcTo(x1, y1, x2, y2, radiusX [, radiusY, rotation ]) Рисует дуги по контрольным точкам context.arcTo(20, 20, 20, 20, 20) .fillStyle [ = value ] Указывает стиль заливки контура фигуры context.fillStyle = "black"; .strokeStyle [ = value ] Указывает стиль контура фигуры context.strokeStyle = "black"; .clearRect( x, y, width, height ) Очищает прямоугольник (делает белым) context.clearRect(20, 20, 90, 80) .fillRect() Рисует закрашенный прямоугольник context.fillRect() .strokeRect() Рисует контур прямоугольника context.strokeRect() .fill() Закрасить все фигуры context.fill(); .stroke() Обвести все фигуры context.stroke(); .drawImage( img, x, y, width, height [, scaleWidth, scaleHeight] ) Нарисовать изображение context.drawImage(img, 20, 20, 90, 90);
.addPath( path, transform ) Добавляет объект Path указанный в аргументе context.addPath(path, transform); .addPathByStrokingPath( path, styles, transform ) Добавляет объект Path указанный в аргументе с возможностью указание стиля отрисовки context.addPathByStrokingPath(path, "black", transform ); .currentTransform [ = value ] Возвращает SVG-образную матрицу трансформации var svg = context.currentTransform; .translate( x, y ) Сдвигает изображение context.translate(20, 20); .setTransform( a, b, c, d, e, f ) Изменяет изображение context.setTransform(1, 1, 40, 40, 5, 5) .addColorStop( offset, color ) Добавляет конечный цвет заливки градиента с указанием смещения от начала context.addColorStop(80, "#ccc"); .createLinearGradient( x0, y0, x1, y1 ) Cоздает объект линейного градиента context.createLinearGradient(20, 20, 40, 40); .createRadialGradient( x0, y0, r0, x1, y1, r1 ) Cоздает объект кругового градиента context.createRadialGradient(0, 0, 20, 40, 40, 20); .createPattern() Cоздает объект шаблона var pat = context.createPattern(); .setTransform() Устанавливает трансформацию context.setTransform();
.measureText() Возвращает объект с метриками текста context.measureText(); .actualBoundingBoxLeft() Вернет горизонтальную координату левой стороны прямоугольника занимаемого текстом context.actualBoundingBoxLeft(); .actualBoundingBoxRight() Вернет горизонтальную координату правой стороны прямоугольника занимаемого текстом context.actualBoundingBoxRight(); .fontBoundingBoxAscent() Расстояние от горизонтальной линии (TextBaseline), до вершины прямоугольника ограничивающего текст context.fontBoundingBoxAscent(); .fontBoundingBoxDescent() Расстояние от горизонтальной линии (TextBaseline), до низа прямоугольника ограничивающего текст context.fontBoundingBoxDescent(); .actualBoundingBoxAscent() Расстояние от горизонтальной линии (TextBaseline), до вершины прямоугольника ограничивающего текст context.actualBoundingBoxAscent(); .actualBoundingBoxDescent() Расстояние от горизонтальной линии (TextBaseline), до низа прямоугольника ограничивающего текст context.actualBoundingBoxDescent(); .emHeightAscent() Расстояние от горизонтальной линии (TextBaseline), до верха прямоугольника ограничивающего текст в em единицах измерения. context.emHeightAscent(); .emHeightDescent() Расстояние от горизонтальной линии (TextBaseline), до низа прямоугольника ограничивающего текст в em единицах измерения. context.emHeightDescent(); .hangingBaseline() Расстояние от горизонтальной линии (TextBaseline), до хэндинг базовой линии текста в em единицах измерения. context.hangingBaseline(); .alphabeticBaseline() Расстояние от горизонтальной линии (TextBaseline), до алфавитной базовой линии текста в em единицах измерения. context.alphabeticBaseline(); .ideographicBaseline() Расстояние от горизонтальной линии (TextBaseline), до идеографической базовой линии текста в em единицах измерения. context.ideographicBaseline(); .drawSystemFocusRing( [ path, ] element ) Если данный элемент ориентирован, рисует кольцо фокусировки вокруг текущего пути по умолчанию или заданный путь, следуя конвенций платформы для фокус-колец. context.drawSystemFocusRing(); .drawCustomFocusRing( [ path, ] element ) context.drawCustomFocusRing(); .scrollPathIntoView() Позволяет управлять прокруткой context.scrollPathIntoView(); .clip() Ограничивает область отсечения context.clip(); .resetClip() Деконстатировать область отсечения context.resetClip(); .isPointInPath() Возвращает истину, если данная точка находится в текущем пути по умолчанию или заданного пути context.isPointInPath(); .isPointInStroke() Возвращает истину, если данная точка будет в регионе, охваченном инсульта текущего пути по умолчанию или заданный путь, учитывая текущий стиль инсульт. context.isPointInStroke(); .addHitRegion() Добавляет область хит для растрового изображения. Аргументом является объект. context.addHitRegion(); fillRule Правило заполнения для использования при определении, какие пиксели находятся внутри пути. context.fillRule(); id id canvas context.id(); parentID Идентификатор родительского области, для целей навигации по доступности инструментов и для курсора запасного варианта. context.parentID(); cursor context.cursor(); control context.control(); label Добавляет label для региона context.label(); role context.role(); .removeHitRegion() context.removeHitRegion();
Изменение высоты или ширины холста сотрет всё его содержимое и все настройки, проще говоря он создастся заново[]; Начало отсчёта (точка 0,0) находится в левом верхнем углу[]. Но её можно сдвигать[]; 3D контекста нет, есть отдельные разработки, но они не стандартизованы[]; Цвет текста можно указывать аналогично CSS, впрочем, как и размер шрифта.
В случае, если вам нет необходимости перерисовывать холст, но нужно производить манипуляции с ним, то вы можете «сфотографировать» весь холст и сохранить в переменную. И работать уже с этим рисунком, не заставляя канву отрисовываться после каждой манипуляции.
Если обновляться должно не всё изображение, а только его часть, то вы можете стирать определенную зону на холсте и рисовать её заново.
Браузеры могут оптимизировать анимации, идущие одновременно, уменьшив число reflow и repaint до одного, что в свою очередь приведёт к повышению точности анимации. Например анимации на JavaScript, синхронизированные с CSS transitions или SVG SMIL. Плюс ко всему если выполняется анимация в табе, который невидим, браузеры не будут продолжать перерисовку, что приведёт к меньшему использованию CPU, GPU, памяти и как следствие снизит расход батареи в мобильных устройствах[]. Для этого используйте requestAnimationFrame.
Все текущие браузеры имеют фильтр размытия изображения при его увеличении. Его стоит использовать, если вы часто попиксельно обрабатываете картинку. Путем уменьшения картинки, например, в два раза и последующего аппаратного увеличения её с помощью фильтра[].
Если игра позволяет отдельно обрабатывать фон и элементы игры, то имеет смысл сделать два холста друг над другом[].
Для очистки канвы лучшим средством будет использование clearRect[], однако, если очищать только необходимые участки, то скорость возрастет ещё больше.
Использование и операции с элементом возможны только через JavaScript. <!doctype html> <html lang="ru"> <head> <title>canvas</title> <script src="example.js"></script> </head> <body> <canvas id="canvas">Этот элемент не поддерживается</canvas> </body> </html>
Файл example.js function onLoadHandler() { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); /* Далее какие-либо действия над холстом */ } window.onload = onLoadHandler;
libCanvas это лёгкий но тем не менее функциональный фреймворк canvas Processing.js это порт языка визуализации Processing EaselJS это библиотека с API похожим на Flash PlotKit это библиотека для создания чартов и графики Rekapi это API Canvas для создания анимации на кейфреймах PhiloGL это фреймворк WebGL для визуализации данных, разработки игр и креативного кодирования. JavaScript InfoVis Toolkit создает интерактивную 2D Canvas визуализацию данных для Web. Frame-Engine это фреймворк для разработки приложений и игр.
