До появления HTML5 Canvas API создание сложных графиков и 2D/3D-проектов на веб-сайте всегда было сложной задачей. Разработчики могли использовать API-интерфейсы рисования только через плагины, такие как SVG (масштабируемая векторная графика) и VML (язык векторной разметки) с некоторыми конкретными веб-браузерами, такими как Internet Explorer. Например, нарисовать простую диагональную линию без элемента холста легко, но довольно сложно, если у вас нет под рукой простого API для 2D-рисования.

Canvas просто обеспечивает это, и именно поэтому это исключительно полезная функция в браузере.

Что такое холст?

Концепция Canvas изначально была разработана компанией APPLE для использования в Mac OS X WebKit для создания виджетов панели мониторинга.

В 2012 году первый черновик HTML5 публикуется как рабочий черновик для рекомендации кандидата, а Canvas (2D и 3D) является частью спецификации HTML5. HTML5 Canvas предоставляет парадигму без плагинов для браузера. Он обеспечивает встроенную поддержку многих функций, которые возможны только со сторонними плагинами или JavaScript Hacks.

В 2012 году опубликован первый черновик HTML5 в качестве рабочего черновика для рекомендации кандидата, а Canvas (2D и 3D) является частью спецификации HTML5. HTML5 Canvas предоставляет парадигму без плагинов для браузера. Он обеспечивает встроенную поддержку многих функций, которые возможны только со сторонними плагинами или JavaScript Hacks.

Начало работы с холстом HTML5

Когда тег холста добавляется на веб-страницу статически или динамически, он создает прямоугольную область на странице или прямоугольную область по умолчанию высотой 150 пикселей и шириной 300 пикселей. Пользователь может создать собственный размер холста, указав определенный размер. В отличие от SVG, который является векторным, холст основан на пикселях.

Элемент холста

<canvas id=”canvas1”></canvas>

После добавления элемента холста на вашу веб-страницу вы можете манипулировать его базой по требованию с помощью JavaScript. Пользователь может добавлять в него линии, графику, диаграммы, анимированный текст.

Если вы работаете с холстом динамически/программно, вам нужно сначала получить его контекст и выполнить некоторые действия в контексте и, наконец, применить эти действия к контексту.

Следующие строки кода необходимы для получения контекста холста с помощью стандартного тега document.getElementById.

<script type="text/javascript">
windows.onload=function() {
var canvas = document.getElementById('canvas1');
var context = canvas=getContext("2d");};
</script>

Если вы используете JQuery, тогда ваш код выглядит так:

<script type="text/javascript">
$(document).ready(function () {
var canvas = $('#canvas1');
var context = canvas[0].getContext("2d");
<script>

Чтобы найти объект холста, вам необходимо получить доступ к контексту его 2D-рисования.

W3C определяет контекст 2D-отрисовки следующим образом:

"Двумерный контекст представляет собой плоскую декартову поверхность, начало координат (0, 0) которой находится в верхнем левом углу, а в пространстве координат значения x увеличиваются при движении вправо, а значения y увеличиваются при движении вниз".

Координаты холста

Координаты на холсте начинаются с x=0, y=0 в верхнем левом углу, что мы называем исходной точкой (0, 0). Использование fillRect(x,y, width,height) увеличивает размер по горизонтали по оси x и по вертикали по оси y.

<script type="text/javascript">
windows.onload=function() {
var canvas = document.getElementById('canvas1');
var context = canvas=getContext("2d");
context.fillRect(20,20,150,100)};
</script>

Холст — пути

Вы можете визуализировать любую форму с помощью HTML5 Canvas API. Вы можете рисовать фигуры, линии, текст и многое другое с помощью HTML5 Canvas. Ниже приведены несколько функций, которые помогут вам рисовать фигуры с помощью холста.

<script type="text/javascript">
windows.onload=function() {
var canvas = document.getElementById('canvas1');
var context = canvas=getContext("2d");
context.moveTo(0,0);
context.lineTo(200,100);
context.stroke();}
</script>

<script type="text/javascript">
windows.onload=function() {
var canvas = document.getElementById('canvas1');
var context = canvas=getContext("2d");
context.beginPath();
context.arc(95,50,40,0,2*Math.PI);
context.stroke();};
</script>

<script type="text/javascript">
windows.onload=function() {
var canvas = document.getElementById('canvas1');
var context = canvas=getContext("2d");
context.beginPath();
context.moveTo(20,20);
context.lineTo(20,100);
context.lineTo(70,100);
context.closePath();
context.stroke();}
</script>

<script type="text/javascript">
windows.onload=function() {
var canvas = document.getElementById('canvas1');
var context = canvas=getContext("2d");
context.rect(20,20,150,100);
context.fillStyle="blue";
context.fill();
context.stroke();}
</script&gt>

заполнить текст

<script type="text/javascript">
windows.onload=function() {
var canvas = document.getElementById('canvas1');
var context = canvas=getContext("2d");
context.font = "30px Arial";
context. fillText ("Plunge into HTML5 Canvas ",10,50);
context.stroke();}
</script>

обводка текста

<script type="text/javascript">
windows.onload=function() {
var canvas = document.getElementById('canvas1');
var context = canvas=getContext("2d");
context.font = "30px Arial";
context.strokeText("Plunge into HTML5 Canvas ",10,50);
context.stroke();}
</script>

Браузерная поддержка HTML5 Canvas

После появления Internet Explorer 9 почти все поставщики браузеров пытаются обеспечить полную поддержку HTML5 Canvas, но большинство доступных браузеров не обеспечивают полной поддержки HTML5 Canvas. Ниже приведена подробная информация о браузерах, которая расскажет вам о том, как они работают с HTML5 Canvas.

Если вы работаете с элементом ‹canvas›, рекомендуется проверить совместимость браузера, а в случае, если браузер клиента не поддерживает элемент ‹canvas›, вы можете разместить другой альтернативный текст.

<script type="text/javascript">
windows.onload=function() {
try{
document.createElement("canvas1").getContext("2d");
document.getElementById("support").innerHTML ="HTML5 Canvas is supported in your browser.";
} catch (e) {
document.getElementById("support").innerHTML = "HTML5 Canvas is not supported in your browser.";}
};
</script>

В этой статье представлен основной обзор холста HTML5, его различных свойств и многое другое. В следующей статье мы обсудим больше о холсте HTML5, таком как фоновые шаблоны, преобразования холста, безопасность холста, анимация и т. д. Оставайтесь с нами!

Изображение предоставлено teamtreehouse.com

Распространите это в своей сети

Оригинальный источник: http://www.azilen.com/blog/plunge-html5-canvas-lets-begin/

Первоначально опубликовано @ http://www.azilen.com