До появления 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