Учебное пособие по HTML5 Canvas

Содержание
  1. Введение Canvas — одна из самых востребованных функций в HTML5. Разработчики любят использовать его для создания многофункциональных веб-приложений. Пользователи могут использовать эти приложения без использования проприетарных плагинов браузера, таких как Adobe Flash Player. Большинство современных браузеров, таких как Chrome, Firefox, Safari, Opera, IE9 и 10, поддерживают его. Через мгновение мы увидим, на что способен холст и как вы можете его использовать. Если вы не знакомы с HTML5, прежде чем погрузиться в эту статью, попробуйте узнать больше здесь. Для чего нужен элемент Canvas? Официально холст — это «разрешение» -зависимый растровый холст, который можно использовать для рендеринга графиков, игровой графики или других визуальных изображений «на лету». Проще говоря, с помощью элемента холста JavaScript и HTML5 вы можете визуализировать 2D-формы и растровые изображения. На изображении ниже показан холст с черной рамкой. Если вы этого не сделаете ‘ Не нахожу это таким захватывающим, пожалуйста, продолжайте читать. Мы увидим, как этот скучный прямоугольник, нарисованный с помощью холста, может быть усилен, чтобы предоставить вам потрясающую графику. Веб-страница может содержать несколько элементов холста. У каждого холста может быть идентификатор, с помощью которого вы можете настроить таргетинг на конкретный холст с помощью JavaScript. Каждый элемент холста имеет 2D-контекст. Здесь снова есть объекты, свойства и методы. Повозившись с ними, вы можете рисовать свои вещи. Чтобы рисовать на холсте, вам нужно ссылаться на контекст холста. Контекст дает вам доступ к 2D-свойствам и методам, которые мы более подробно рассмотрим позже. Каждый элемент холста имеет координаты x и y. X — горизонтальная координата, а y — вертикальная координата. На следующем изображении эти координаты показаны на холсте. Уточнение SVG — холст Взаимосвязь Важно понимать разницу между SVG и элементами холста. SVG — это формат векторной графики на основе XML. Вы можете добавлять к нему стили с помощью CSS и добавлять к нему динамическое поведение с помощью SVG DOM. Холст основан на растровом изображении. Он позволяет рисовать графику и фигуры с помощью JavaScript. Как и в случае с SVG, вы можете добавить к нему стиль и динамическое поведение. Вот несколько причин использовать холст поверх SVG. Когда дело доходит до рисования сложной графики, холст работает быстрее. вы можете сохранять изображения вне холст, тогда как вы не можете использовать SVG. все на холсте — пиксели. SVG также имеет некоторые преимущества. Поскольку разрешение не зависит от разрешения, он может масштабироваться для разных разрешений экрана. Поскольку это XML, таргетинг на различные элементы проще. он хорош в сложных анимациях. Итак, какую из них выбрать вместо другой? для разработки интерактивной векторной графики, зависящей от разрешения, выберите SVG. Если вы хотите визуализировать графику очень быстро, как в игре, или не хотите иметь дело с XML, выберите холст.. Фактически, они дополняют друг друга при доставке реальных приложений. Canvas и аппаратное ускорение С браузерами с поддержкой аппаратного ускорения вы, как разработчик, будете достаточно довольны . Потому что это визуализирует изображение/анимацию с той скоростью, которую вы хотите, чтобы ваши пользователи могли испытать. Давайте немного углубимся. Современные настольные компьютеры имеют графический процессор (графический процессор) и центральный процессор (центральный процессор). Когда дело доходит до доставки быстрого изображения/анимации, операция выполняется графическим процессором, ЦП продолжает работу сервера для остальной части задачи, что приводит к ускорению графической производительности. Chrome 27, Firefox 22, IE10 , И Opera Next поддерживает аппаратное ускорение и демонстрирует значительное улучшение рендеринга графики. Поскольку JavaScript — это рабочая лошадка, лежащая в основе Canvas, можно использовать несколько настроек производительности для более быстрого рендеринга изображения/анимации. Canvas 2D API Canvas 2D API — это объект, который позволяет вам рисовать и управлять изображениями и графикой на элементе холста. Чтобы ссылаться на контекст холста, вы вызываете getContext, который является методом элемента холста. У него есть один параметр, который в настоящее время равен 2d. Вот фрагмент кода для ссылки на контекст. Каждый холст имеет свой собственный контекст, поэтому, если ваша страница содержит несколько элементов холста; у вас должна быть ссылка на каждый отдельный контекст, с которым вы хотите работать. Помимо getContext, в 2D API холста в вашем распоряжении множество других функций (функции объекта называются методами в JavaScript). Некоторые из наиболее примечательных из них описаны ниже. Функции преобразования: scale — позволяет масштабировать текущий контекст. rotate — позволяет вращать координаты x и y текущего контекста. Функции состояния: save — позволяет сохранить текущее состояние контекста. restore — позволяет восстановить состояние контекста из ранее сохраненного состояния. Текстовые функции font — получает или устанавливает шрифт для текущего контекста. fillText — отображает заполненный текст на текущем холсте. measureText — измеряет текущую ширину указанного текста. Работа с Canvas По мере того, как мы знакомы с Основы Canvas, мы рассмотрим некоторые возможности Canvas, которые мы можем использовать. Здесь мы сосредоточимся на базовом использовании Canvas, то есть на создании быстрой динамической графики с помощью JavaScript. Но стоит упомянуть, что помимо этого есть еще несколько аспектов использования Canvas, например работа с текстовым API для холста, WebGL — 3D-графика с холстом, полноэкранный API, режимы наложения холста — Метод определения эффекта, возникающего в результате наложения двух слоев на элемент холста и рисунков холста CSS — Метод использования холста HTML5 в качестве фонового изображения. Настройка холста Чтобы настроить холст для рисования, вы должны добавить тег в HTML и назначить ему контекст 2D-рисования. Все операции рисования выполняются в контексте element В ваш HTML-код включите следующие коды, которые определите элемент холста, задав ему ширину и высоту. Если ширина или высота не указан, используется ширина по умолчанию 300 пикселей и высота по умолчанию 150 пикселей. Холст изначально пустой и прозрачный. Контекст рендеринга создает поверхность рисования фиксированного размера, которая открывает один или несколько контекстов визуализации, которые используются для создания и управления отображаемым содержимым. Мы сосредоточимся на контексте 2D-рендеринга. В других контекстах могут быть разные типы рендеринга; например, WebGL использует трехмерный контекст («экспериментальный-webgl») на основе OpenGL ES. Изначально холст пустой. Чтобы что-то отобразить, скрипту сначала необходимо получить доступ к контексту визуализации и отрисовать его. Элемент имеет метод getContext (), используемый для получения контекста визуализации и его функций рисования. getContext () принимает один параметр, тип контекста. Для 2D-графики, такой как описанная в этом руководстве, вы указываете «2d». var canvas = document.getElementById ('tutorial'); var ctx = canvas.getContext ('2d'); Первая строка извлекает узел DOM для элемента путем вызова метода document.getElementById (). Когда у вас есть узел элемента, вы можете получить доступ к контексту рисования с помощью его метода getContext (), который возвращает объект, который предоставляет методы и свойства для рисования и управления изображениями и графикой на элементе холста в документе. Проверка поддержки Резервное содержимое отображается в браузерах, не поддерживающих . С помощью JavaScript вы можете проверить поддержку программно, просто проверив наличие метода getContext (). Если система координат находится в окне вашего браузера, то крайняя верхняя левая позиция обозначает (0, 0). При перемещении вправо значение x увеличивается, а при перемещении вниз увеличивается значение y. Таким образом, если в теле документа HTML не задано поле, окно браузера (0,0) совпадает с полем холста. См. Следующий код: Нарисуйте линию var canvas = document.getElementById ('DemoCanvas'); //Всегда проверяйте свойства и методы, чтобы убедиться, что ваш код не нарушается в других браузерах. If (canvas. getContext) {var ctx = canvas.getContext ('2d'); //здесь рисуем код} else {//здесь не поддерживаемый холстом код}

    Графическое представление над холстом:


    Поддержка браузера и полифиллы

    Как и многие другие функции HTML5, вам необходимо проверить, поддерживается ли Canvas в браузере визуализации. На момент написания этой статьи IE 9.0, 10.0 и 11.0, Firefox 2.0–26.0, Chrome 4.0–31.0, Safari 3.1–7.0, Opera 9.0–17.0, iOS Safari 3.2–7.0, Opera mini 5.0–7.0, Android Browser 2.1–4.3, Blackberry 7.0 и 10.0, а также IE Mobile 10.0 поддерживают Canvas basic. Это касается большинства современных браузеров, которые вы, возможно, хорошо понимаете. Если вы считаете, что у вас могут быть посетители из браузеров, не поддерживающих Canvas, вы можете использовать любой из нескольких доступных полифилов . Ниже приведен список использования имен (обычно вы добавляете эти коды в раздел заголовка своей HTML-страницы) некоторых из наиболее часто используемых

    flashcanvas

     
    
    
    Вы можете загрузить flashcanvas со страницы http://flashcanvas.net/download
    

    Вы можете загрузить explorercanvas со страницы http://code.google.com/p/explorercanvas/downloads/list Вы можете добавить это в конец вашего HTML-документа. Вы можете загрузить slcanvas с http://slcanvas.codeplex.com/releases/view/41025 fxcanvas Вы можете загрузить fxcanvas со страницы http://code.google.com/p/fxcanvas/downloads/detail?name = fxcanvas-0.2 (beta4) -supersonic.zip kineticjs Вы можете изучить, как использовать kineticjs, из http://kineticjs. com/docs/ Вы можете загрузить kineticjs из HTML5 Canvas Demo #FirstCanvas {width: 500px; height: 300px; border: 3px сплошной зеленый; background-color: orange;} Демонстрация Создание холста различными методами Пример HTML5 Canvas с различными методами window.onload = function () {var w3rcanvas = document.getElementById ( "w3rCanvasTag"); var w3rcontext = w3rcanvas.getContext ('2d'); w3rcontext.fillStyle = 'rgb (0,0,255)'; //Устанавливает цвет заливки области w3rcontext.fillRect (0,0,400,400); //Заполняет прямоугольник, расположенный в точках x и y, шириной и высотой w и h. w3rcontext.fillStyle = 'rgb (255,0,0)'; w3rcontext.fillRect (50,50,300,300); w3rcontext.fillStyle = 'rgb (0,255,0)'; w3rcontext.fillRect (100,100,200,200); w3rcontext.fillStyle = 'rgb (100,100,100)'; w3rcontext.fillRect (125,175,150,25); }
    Живая демонстрация Создание холста с прозрачностью Пример HTML5 Canvas с прозрачностью window.onload = function () {var w3rcanvas = document.getElementById ("w3rCanvasTag"); var w3rcontext = w3rcanvas.getContext ('2d'); w3rcontext.fillStyle = 'rgb (0,0,255)'; w3rcontext.fillRect (30,30,300,300); w3rcontext.fillStyle = 'rgba (0,255,0,0.5)'; w3rcontext.fillRect (60,60,300,300); w3rcontext.fillStyle = 'rgba (255,0,0,0.25)'; w3rcontext.fillRect (90,90,300,300); } Живая демонстрация Создание холста с градиентом Пример градиента холста HTML5 window.onload = function () {var w3rcanvas = document.getElementById ("w3rCanvasTag"); var w3rcontext = w3rcanvas.getContext ('2d'); var w3rgradient = w3rcontext.createRadialGradient (300,300,0,300,300,300); w3rgradient.addColorStop ("0", "magenta");//Добавляет границу цвета к градиенту. Цветовая остановка - это позиция в градиенте, где происходит изменение цвета.. Смещение должно быть от 0 до 1. w3rgradient.addColorStop («. 25», «синий»); w3rgradient.addColorStop (". 50", "зеленый"); w3rgradient.addColorStop (". 75", "желтый"); w3rgradient.addColorStop («1.0», «красный»); w3rcontext.fillStyle = w3rgradient; w3rcontext.fillRect (0,0,400,400); } Живая демонстрация Использование нескольких холстов элементы HTML5 Canvas Demo window.onload = function () {var mycontext1 = document.getElementById ("myCanvasTag1") .getContext ('2d'); var mycontext2 = document.getElementById ("myCanvasTag2"). getContext ('2d'); var mycontext3 = document.getElementById ("myCanvasTag3"). getContext ('2d'); var mycontext4 = document.getElementById ("myCanvasTag4"). getContext ('2d'); //градиент 1 var mygradient1 = mycontext1.createLinearGradient (30,30,90,90); mygradient1.addColorStop (0, «# FF0000»); mygradient1.addColorStop (1, «# 00FF00»); mycontext1.fillStyle = mygradient1; mycontext1.fillRect (0,0,100,100); //градиент 2 var mygradient2 = mycontext2.createLinearGradient (30,30,90,90); mygradient2.addColorStop (1, «# FF0000»); mygradient2.addColorStop (0, «# 00FF00»); mycontext2.fillStyle = mygradient2; mycontext2.fillRect (0,0,100,100); var mygradient3 = mycontext3.createLinearGradient (30,30,90,90); mygradient3.addColorStop (0, «# 0000FF»); mygradient3.addColorStop (.5, "# 00FFDD"); mycontext3.fillStyle = mygradient3; mycontext3.fillRect (0,0,100,100); var mygradient4 = mycontext1.createLinearGradient (30,30,90,90); mygradient4.addColorStop (0, «# DD33CC»); mygradient4.addColorStop (1, «# EEEEEE»); mycontext4.fillStyle = mygradient4; mycontext4.fillRect (0,0,100,100); }
    Живая демонстрация Текст с холстом Пример HTML5 Canvas Text function CreateText () {var canvas = document.getElementById ("w3rCanvas"); var context = canvas.getContext ("2d"); var x = 100; var y = 100; context.font = 'bold 32pt Arial';//устанавливает стиль, размер и тип шрифта context.fillStyle = 'orange';//устанавливает цвет шрифтаcontext.fillText ("Добро пожаловать в w3resource! ", x, y);//устанавливает текст для рендеринга} Живая демонстрация Рисование изображения на холсте Рисование изображения с помощью Canvas body {margin: 0px; padding: 0px;} var canvas = document.getElementById ('w3rCanvas'); var context = canvas.getContext ('2d'); var imgObj = новое изображение (); imgObj.onload = функция () {context.drawImage (imgObj, 150, 78); }; imgObj.src = '//www.w3resource.com/images/logo.png'; Живая демонстрация Базовая анимация с помощью Canvas Базовая анимация с примером Canvas Если вы можете видеть это, ваш браузер не поддерживает Canvas var canvas; var ctx; var x = 400; var y = 300; var dx = 2; var dy = 4; var width = 400; var height = 300; функция circle (x, y, r) {ctx.beginPath (); ctx.arc (x, y, r, 0, Math.PI * 2, истина); ctx.fill ();} функция rect (x, y, w, h) {ctx.beginPath (); ctx.rect (x, y, w, h); ctx.closePath (); ctx.fill ();} функция сброса () {ctx.clearRect (0, 0, ширина, высота);} функция инициализации () {холст = документ.getElementById ("холст"); ctx = canvas.getContext ("2d"); return setInterval (animate, 10);} функция animate () {reset (); ctx.fillStyle = "# FAF7F8"; rect (0,0, ширина, высота); ctx. fillStyle = "# 444444"; круг (х, у, 10); если (x + dx> width || x + dx height || y + dy <0) dy = -dy; х + = дх; y + = dy;} init (); Живая демонстрация Небольшое объяснение Чтобы создать простую анимацию с помощью Canvas, необходимо сделать следующее. функция circle, функция rect используется для создания круга, который движется, и прямоугольника, внутри которого происходит анимация круга. функция сброса очищает холст. функция init создает холст и возвращает функцию animate. setInterval установлен на 10 миллисекунд, поэтому каждые 10 миллисекунд круг касается любой из поверхностей. Радиус круга равен 10, а его начало находится в (x, y). Если мы изменим изменение x и y, круг переместится. dx и dy - две переменные, определяющие количество изменений, вносимых через каждые 10 миллисекунд. x изменяется на dx до тех пор, пока значение x + dx не больше ширины холста или меньше 0. Когда это так, мы обращаем его, сделав dx = -dx. Аналогичная концепция применяется для y и dy. Canvas на мобильном устройстве Мы уже видели список мобильных браузеров, поддерживающих Canvas. Но есть определенные проблемы, о которых вам нужно помнить. HTML5 Canvas - это все растровые изображения, то есть все пиксели. Что делает зависимым разрешение визуализированной графики. Кроме того, здесь нет узлов DOM, которыми можно было бы манипулировать. Он также не подходит для пользовательских интерфейсов приложений. Всякий раз, когда вы хотите что-то нарисовать, вам нужно нарисовать это вручную (с помощью JavaScript). Однако вы можете повысить отзывчивость графики на основе холста, используя некоторые настройки в JavaScript. Canvas можно настроить для работы с API веб-воркера через прокси-сервер холста, иначе в Интернете Рабочие не достигают узлов DOM. Библиотеки Для облегчения работы с Canvas доступно несколько библиотек JavaScript. Вот краткий список kinetic.js Easel.js Fabric.js Зебра
  2. Для чего нужен элемент Canvas?
  3. Уточнение SVG — холст Взаимосвязь
  4. Canvas и аппаратное ускорение
  5. Canvas 2D API
  6. Работа с Canvas
  7. Настройка холста

Введение

Canvas — одна из самых востребованных функций в HTML5. Разработчики любят использовать его для создания многофункциональных веб-приложений. Пользователи могут использовать эти приложения без использования проприетарных плагинов браузера, таких как Adobe Flash Player. Большинство современных браузеров, таких как Chrome, Firefox, Safari, Opera, IE9 и 10, поддерживают его. Через мгновение мы увидим, на что способен холст и как вы можете его использовать. Если вы не знакомы с HTML5, прежде чем погрузиться в эту статью, попробуйте узнать больше здесь.

Для чего нужен элемент Canvas?

Официально холст — это «разрешение» -зависимый растровый холст, который можно использовать для рендеринга графиков, игровой графики или других визуальных изображений «на лету». Проще говоря, с помощью элемента холста JavaScript и HTML5 вы можете визуализировать 2D-формы и растровые изображения. На изображении ниже показан холст с черной рамкой.

Если вы этого не сделаете ‘ Не нахожу это таким захватывающим, пожалуйста, продолжайте читать. Мы увидим, как этот скучный прямоугольник, нарисованный с помощью холста, может быть усилен, чтобы предоставить вам потрясающую графику.

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

Каждый элемент холста имеет координаты x и y. X — горизонтальная координата, а y — вертикальная координата. На следующем изображении эти координаты показаны на холсте.

Уточнение SVG — холст Взаимосвязь

Важно понимать разницу между SVG и элементами холста. SVG — это формат векторной графики на основе XML. Вы можете добавлять к нему стили с помощью CSS и добавлять к нему динамическое поведение с помощью SVG DOM. Холст основан на растровом изображении. Он позволяет рисовать графику и фигуры с помощью JavaScript. Как и в случае с SVG, вы можете добавить к нему стиль и динамическое поведение. Вот несколько причин использовать холст поверх SVG.

  • Когда дело доходит до рисования сложной графики, холст работает быстрее.
  • вы можете сохранять изображения вне холст, тогда как вы не можете использовать SVG.
  • все на холсте — пиксели.

SVG также имеет некоторые преимущества.

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

Итак, какую из них выбрать вместо другой? для разработки интерактивной векторной графики, зависящей от разрешения, выберите SVG. Если вы хотите визуализировать графику очень быстро, как в игре, или не хотите иметь дело с XML, выберите холст.. Фактически, они дополняют друг друга при доставке реальных приложений.

Canvas и аппаратное ускорение

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

Современные настольные компьютеры имеют графический процессор (графический процессор) и центральный процессор (центральный процессор). Когда дело доходит до доставки быстрого изображения/анимации, операция выполняется графическим процессором, ЦП продолжает работу сервера для остальной части задачи, что приводит к ускорению графической производительности.

Chrome 27, Firefox 22, IE10 , И Opera Next поддерживает аппаратное ускорение и демонстрирует значительное улучшение рендеринга графики.

Поскольку JavaScript — это рабочая лошадка, лежащая в основе Canvas, можно использовать несколько настроек производительности для более быстрого рендеринга изображения/анимации.

Canvas 2D API

Canvas 2D API — это объект, который позволяет вам рисовать и управлять изображениями и графикой на элементе холста. Чтобы ссылаться на контекст холста, вы вызываете getContext, который является методом элемента холста. У него есть один параметр, который в настоящее время равен 2d. Вот фрагмент кода для ссылки на контекст.

Каждый холст имеет свой собственный контекст, поэтому, если ваша страница содержит несколько элементов холста; у вас должна быть ссылка на каждый отдельный контекст, с которым вы хотите работать.

Помимо getContext, в 2D API холста в вашем распоряжении множество других функций (функции объекта называются методами в JavaScript). Некоторые из наиболее примечательных из них описаны ниже.

Функции преобразования:

  • scale — позволяет масштабировать текущий контекст.
  • rotate — позволяет вращать координаты x и y текущего контекста.

Функции состояния:

  • save — позволяет сохранить текущее состояние контекста.
  • restore — позволяет восстановить состояние контекста из ранее сохраненного состояния.

Текстовые функции

  • font — получает или устанавливает шрифт для текущего контекста.
  • fillText — отображает заполненный текст на текущем холсте.
  • measureText — измеряет текущую ширину указанного текста.

Работа с Canvas

По мере того, как мы знакомы с Основы Canvas, мы рассмотрим некоторые возможности Canvas, которые мы можем использовать. Здесь мы сосредоточимся на базовом использовании Canvas, то есть на создании быстрой динамической графики с помощью JavaScript. Но стоит упомянуть, что помимо этого есть еще несколько аспектов использования Canvas, например работа с текстовым API для холста, WebGL — 3D-графика с холстом, полноэкранный API, режимы наложения холста — Метод определения эффекта, возникающего в результате наложения двух слоев на элемент холста и рисунков холста CSS — Метод использования холста HTML5 в качестве фонового изображения.

Настройка холста

Чтобы настроить холст для рисования, вы должны добавить тег в HTML и назначить ему контекст 2D-рисования. Все операции рисования выполняются в контексте

element

В ваш HTML-код включите следующие коды, которые определите элемент холста, задав ему ширину и высоту.

Если ширина или высота не указан, используется ширина по умолчанию 300 пикселей и высота по умолчанию 150 пикселей. Холст изначально пустой и прозрачный.

Контекст рендеринга

создает поверхность рисования фиксированного размера, которая открывает один или несколько контекстов визуализации, которые используются для создания и управления отображаемым содержимым. Мы сосредоточимся на контексте 2D-рендеринга. В других контекстах могут быть разные типы рендеринга; например, WebGL использует трехмерный контекст («экспериментальный-webgl») на основе OpenGL ES.

Изначально холст пустой. Чтобы что-то отобразить, скрипту сначала необходимо получить доступ к контексту визуализации и отрисовать его. Элемент имеет метод getContext (), используемый для получения контекста визуализации и его функций рисования. getContext () принимает один параметр, тип контекста. Для 2D-графики, такой как описанная в этом руководстве, вы указываете «2d».

  var canvas = document.getElementById ('tutorial');  var ctx = canvas.getContext ('2d');  

Первая строка извлекает узел DOM для элемента путем вызова метода document.getElementById (). Когда у вас есть узел элемента, вы можете получить доступ к контексту рисования с помощью его метода getContext (), который возвращает объект, который предоставляет методы и свойства для рисования и управления изображениями и графикой на элементе холста в документе.

Проверка поддержки

Резервное содержимое отображается в браузерах, не поддерживающих . С помощью JavaScript вы можете проверить поддержку программно, просто проверив наличие метода getContext ().

Если система координат находится в окне вашего браузера, то крайняя верхняя левая позиция обозначает (0, 0). При перемещении вправо значение x увеличивается, а при перемещении вниз увеличивается значение y. Таким образом, если в теле документа HTML не задано поле, окно браузера (0,0) совпадает с полем холста. См. Следующий код:

       Нарисуйте линию       var canvas = document.getElementById ('DemoCanvas'); //Всегда проверяйте свойства и методы, чтобы убедиться, что ваш код не нарушается в других браузерах. If (canvas. getContext) {var ctx = canvas.getContext ('2d'); //здесь рисуем код} else {//здесь не поддерживаемый холстом код}    

Графическое представление над холстом:


Поддержка браузера и полифиллы

Как и многие другие функции HTML5, вам необходимо проверить, поддерживается ли Canvas в браузере визуализации. На момент написания этой статьи IE 9.0, 10.0 и 11.0, Firefox 2.0–26.0, Chrome 4.0–31.0, Safari 3.1–7.0, Opera 9.0–17.0, iOS Safari 3.2–7.0, Opera mini 5.0–7.0, Android Browser 2.1–4.3, Blackberry 7.0 и 10.0, а также IE Mobile 10.0 поддерживают Canvas basic. Это касается большинства современных браузеров, которые вы, возможно, хорошо понимаете. Если вы считаете, что у вас могут быть посетители из браузеров, не поддерживающих Canvas, вы можете использовать любой из нескольких доступных полифилов . Ниже приведен список использования имен (обычно вы добавляете эти коды в раздел заголовка своей HTML-страницы) некоторых из наиболее часто используемых

flashcanvas

       

Вы можете загрузить flashcanvas со страницы http://flashcanvas.net/download

       

Вы можете загрузить explorercanvas со страницы http://code.google.com/p/explorercanvas/downloads/list

     

Вы можете добавить это в конец вашего HTML-документа.

Вы можете загрузить slcanvas с http://slcanvas.codeplex.com/releases/view/41025

fxcanvas

               

Вы можете загрузить fxcanvas со страницы http://code.google.com/p/fxcanvas/downloads/detail?name = fxcanvas-0.2 (beta4) -supersonic.zip

kineticjs

Вы можете изучить, как использовать kineticjs, из http://kineticjs. com/docs/

Вы можете загрузить kineticjs из

      HTML5 Canvas Demo   #FirstCanvas {width: 500px; height: 300px; border: 3px сплошной зеленый; background-color: orange;}          

Демонстрация

Создание холста различными методами

      Пример HTML5 Canvas с различными методами   window.onload = function () {var w3rcanvas = document.getElementById (  "w3rCanvasTag");  var w3rcontext = w3rcanvas.getContext ('2d');  w3rcontext.fillStyle = 'rgb (0,0,255)'; //Устанавливает цвет заливки области w3rcontext.fillRect (0,0,400,400); //Заполняет прямоугольник, расположенный в точках x и y, шириной и высотой w и h.  w3rcontext.fillStyle = 'rgb (255,0,0)';  w3rcontext.fillRect (50,50,300,300);  w3rcontext.fillStyle = 'rgb (0,255,0)';  w3rcontext.fillRect (100,100,200,200);  w3rcontext.fillStyle = 'rgb (100,100,100)';  w3rcontext.fillRect (125,175,150,25);  }    

Живая демонстрация

Создание холста с прозрачностью

      Пример HTML5 Canvas с прозрачностью    window.onload = function () {var w3rcanvas = document.getElementById ("w3rCanvasTag");  var w3rcontext = w3rcanvas.getContext ('2d');  w3rcontext.fillStyle = 'rgb (0,0,255)';  w3rcontext.fillRect (30,30,300,300);  w3rcontext.fillStyle = 'rgba (0,255,0,0.5)';  w3rcontext.fillRect (60,60,300,300);  w3rcontext.fillStyle = 'rgba (255,0,0,0.25)';  w3rcontext.fillRect (90,90,300,300);  }         

Живая демонстрация

Создание холста с градиентом

      Пример градиента холста HTML5   window.onload = function  () {var w3rcanvas = document.getElementById ("w3rCanvasTag");  var w3rcontext = w3rcanvas.getContext ('2d');  var w3rgradient = w3rcontext.createRadialGradient (300,300,0,300,300,300);  w3rgradient.addColorStop ("0", "magenta");//Добавляет границу цвета к градиенту.  Цветовая остановка - это позиция в градиенте, где происходит изменение цвета.. Смещение должно быть от 0 до 1. w3rgradient.addColorStop («. 25», «синий»);  w3rgradient.addColorStop (". 50", "зеленый");  w3rgradient.addColorStop (". 75", "желтый");  w3rgradient.addColorStop («1.0», «красный»);  w3rcontext.fillStyle = w3rgradient;  w3rcontext.fillRect (0,0,400,400);  }         

Живая демонстрация

Использование нескольких холстов элементы

      HTML5 Canvas Demo       window.onload = function () {var mycontext1 = document.getElementById ("myCanvasTag1")  .getContext ('2d');  var mycontext2 = document.getElementById ("myCanvasTag2"). getContext ('2d');  var mycontext3 = document.getElementById ("myCanvasTag3"). getContext ('2d');  var mycontext4 = document.getElementById ("myCanvasTag4"). getContext ('2d'); //градиент 1 var mygradient1 = mycontext1.createLinearGradient (30,30,90,90);  mygradient1.addColorStop (0, «# FF0000»);  mygradient1.addColorStop (1, «# 00FF00»);  mycontext1.fillStyle = mygradient1;  mycontext1.fillRect (0,0,100,100); //градиент 2 var mygradient2 = mycontext2.createLinearGradient (30,30,90,90);  mygradient2.addColorStop (1, «# FF0000»);  mygradient2.addColorStop (0, «# 00FF00»);  mycontext2.fillStyle = mygradient2;  mycontext2.fillRect (0,0,100,100);  var mygradient3 = mycontext3.createLinearGradient (30,30,90,90);  mygradient3.addColorStop (0, «# 0000FF»);  mygradient3.addColorStop (.5, "# 00FFDD");  mycontext3.fillStyle = mygradient3;  mycontext3.fillRect (0,0,100,100);  var mygradient4 = mycontext1.createLinearGradient (30,30,90,90);  mygradient4.addColorStop (0, «# DD33CC»);  mygradient4.addColorStop (1, «# EEEEEE»);  mycontext4.fillStyle = mygradient4;  mycontext4.fillRect (0,0,100,100);  }     

Живая демонстрация

Текст с холстом

      Пример HTML5 Canvas Text   function CreateText () {var canvas = document.getElementById ("w3rCanvas"); var context = canvas.getContext ("2d");  var x = 100; var y = 100; context.font = 'bold 32pt Arial';//устанавливает стиль, размер и тип шрифта context.fillStyle = 'orange';//устанавливает цвет шрифтаcontext.fillText ("Добро пожаловать в w3resource!  ", x, y);//устанавливает текст для рендеринга}         

Живая демонстрация

Рисование изображения на холсте

      Рисование изображения с помощью Canvas   body {margin: 0px; padding: 0px;}       var canvas = document.getElementById ('w3rCanvas');  var context = canvas.getContext ('2d');  var imgObj = новое изображение ();  imgObj.onload = функция () {context.drawImage (imgObj, 150, 78);  };  imgObj.src = '//www.w3resource.com/images/logo.png';    

Живая демонстрация

Базовая анимация с помощью Canvas

       Базовая анимация с примером Canvas     Если  вы можете видеть это, ваш браузер не поддерживает Canvas   var canvas;  var ctx; var x = 400; var y = 300; var dx = 2; var dy = 4; var width = 400; var height = 300;  функция circle (x, y, r) {ctx.beginPath ();  ctx.arc (x, y, r, 0, Math.PI * 2, истина);  ctx.fill ();} функция rect (x, y, w, h) {ctx.beginPath ();  ctx.rect (x, y, w, h);  ctx.closePath ();  ctx.fill ();} функция сброса () {ctx.clearRect (0, 0, ширина, высота);} функция инициализации () {холст = документ.getElementById ("холст");  ctx = canvas.getContext ("2d");  return setInterval (animate, 10);} функция animate () {reset ();  ctx.fillStyle = "# FAF7F8";  rect (0,0, ширина, высота);  ctx. fillStyle = "# 444444";  круг (х, у, 10);  если (x + dx> width || x + dx  height || y + dy <0) dy = -dy;  х + = дх;  y + = dy;} init ();     

Живая демонстрация

Небольшое объяснение Чтобы создать простую анимацию с помощью Canvas, необходимо сделать следующее.

функция circle, функция rect используется для создания круга, который движется, и прямоугольника, внутри которого происходит анимация круга. функция сброса очищает холст. функция init создает холст и возвращает функцию animate. setInterval установлен на 10 миллисекунд, поэтому каждые 10 миллисекунд круг касается любой из поверхностей.

Радиус круга равен 10, а его начало находится в (x, y). Если мы изменим изменение x и y, круг переместится. dx и dy - две переменные, определяющие количество изменений, вносимых через каждые 10 миллисекунд. x изменяется на dx до тех пор, пока значение x + dx не больше ширины холста или меньше 0. Когда это так, мы обращаем его, сделав dx = -dx. Аналогичная концепция применяется для y и dy.

Canvas на мобильном устройстве

Мы уже видели список мобильных браузеров, поддерживающих Canvas. Но есть определенные проблемы, о которых вам нужно помнить.

HTML5 Canvas - это все растровые изображения, то есть все пиксели. Что делает зависимым разрешение визуализированной графики. Кроме того, здесь нет узлов DOM, которыми можно было бы манипулировать. Он также не подходит для пользовательских интерфейсов приложений. Всякий раз, когда вы хотите что-то нарисовать, вам нужно нарисовать это вручную (с помощью JavaScript).

Однако вы можете повысить отзывчивость графики на основе холста, используя некоторые настройки в JavaScript.

Canvas можно настроить для работы с API веб-воркера через прокси-сервер холста, иначе в Интернете Рабочие не достигают узлов DOM.

Библиотеки

Для облегчения работы с Canvas доступно несколько библиотек JavaScript. Вот краткий список

  • kinetic.js
  • Easel.js
  • Fabric.js
  • Зебра

Оцените статью
nanomode.ru
Добавить комментарий