Canvas

Елемент <canvas> є частиною специфікації WHATWG HTML [Архівовано 1 травня 2021 у Wayback Machine.] та W3C HTML Canvas 2D Context [Архівовано 11 березня 2021 у Wayback Machine.].

<canvas> вперше було втілено Apple в Mac OS X Dashboard та Safari 3.1. У Gecko підтримка <canvas> з'явилася у версії Firefox 1.5, у Presto з версії 9.0 веббраузера Opera, а Internet Explorer підтримує <canvas> починаючи з 9-ї версії.

Щоб відобразити <canvas> в html-документі, слід використати наступний код:

  <canvas id="tutorial" width="150" height="150">  </canvas>

Він дуже схожий на тег <img>, з тією лише різницею, що не містить атрибутів src і alt. Елемент <canvas> має всього два атрибути — width і height. Обидва вони не є обов'язковими, і можуть бути задані через властивості DOM. Якщо ширина і висота не визначені, <canvas> буде створений шириною в 300 пікселів і 150 пікселів заввишки. Розмір елемента може бути довільним і задаватися через CSS, але при промальовуванні картинка масштабується відповідно до компонування.

Атрибут id не є специфічним для елемента <canvas>, але є одним з атрибутів HTML за замовчуванням, і може бути застосований майже до всіх елементів HTML (також як class, наприклад). Завжди визначати id елемента — гарна ідея, тому що це значно спрощує ідентифікацію його за допомогою скриптів.

Стиль елемента <canvas> може налаштовуватися також, як і звичайне зображення через CSS (margin, border, background, і т.п.). Ці правила, проте, не впливають на саме малювання в <canvas>. Якщо ніякі налаштування стилю не задані, <canvas> буде створений повністю прозорим.

Аварійний стан ред.

У зв'язку з тим, що елемент <canvas> відносно новий, і не реалізований в деяких браузерах (таких як Firefox 1.0 та Internet Explorer), нам необхідно надати якийсь аварійний вміст елементу, якщо браузер цей елемент не підтримує.

Це дуже просто: ми лише надаємо альтернативний вміст всередині елемента <canvas>. Браузери, які не підтримують <canvas>, проігнорують контейнер і оброблять аварійний вміст всередині нього. Браузери ж, що підтримують <canvas>, проігнорують вміст контейнера і нормально оброблять <canvas>.

Приміром, ми можемо видати текстовий опис вмісту <canvas>, або показати статичну картинку замість динамічно намальованого вмісту. Це може виглядати приблизно так:

<canvas id="photo" width="150" height="150"> Використовуйте сучасніший браузер!</canvas>

Або

<canvas id="photo" width="150" height="150"> <img src="images/photo.jpg" width="150" height="150" /> </canvas>

<canvas> створює поверхню для малювання, яка надає один або більше контекстів для відтворення, який використовується для створення відображуваного контенту і маніпуляцій з ним. Ми сфокусуємо на 2D (двомірному) контексті відтворення, який в наш час є єдиним певним контекстом. У майбутньому інші контексти зможуть підтримувати інші види відтворення: наприклад, цілком ймовірно, що буде додано 3D контекст, заснований на OpenGL ES.

<canvas> спочатку порожній, і для того, щоб що-небудь відобразити, скрипту необхідно отримати контекст відтворення і малювати вже на ньому. Елемент <canvas> має DOM-метод getContext і призначений для отримання контексту відтворення разом з його функціями малювання. getContext () приймає один параметр — тип контексту

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

Першим рядком ми отримуємо DOM-вузол нашого <canvas>, використовуючи метод getElementById. А отримати доступ до контексту малювання ми можемо методом getContext.

• Scalable Vector Graphics
• WebGL
• Векторна графіка
• Растрова графіка

• Специфікація від WHATWG [Архівовано 7 січня 2015 у Wayback Machine.]
• Специфікація від W3C [Архівовано 11 березня 2021 у Wayback Machine.]
• Специфікація від W3C, переклад на російську [Архівовано 17 червня 2016 у Wayback Machine.]
• Applications, games, tools and tutorials using HTML5 canvas and JavaScript - Canvas Demos [Архівовано 23 грудня 2014 у Wayback Machine.]
• HTML5 Canvas Tutorials [Архівовано 24 грудня 2014 у Wayback Machine.]
• HTML5 Canvas Cheat Sheet [Архівовано 7 січня 2015 у Wayback Machine.]
• Kevs3D - HTML5 Canvas demos by Kevin Roast [Архівовано 7 січня 2015 у Wayback Machine.]
• HTML5 Canvas Scratch Pad [Архівовано 9 січня 2015 у Wayback Machine.]
• explorercanvas - HTML5 Canvas for Internet Explorer - Google Project Hosting [Архівовано 11 лютого 2013 у WebCite]
• Canvas - HTML | MDN (ru) [Архівовано 25 березня 2015 у Wayback Machine.]
• Canvas tutorial - Web developer guide | MDN (ru) [Архівовано 30 березня 2015 у Wayback Machine.]
• Canvas - Web API Interfaces | MDN (en) [Архівовано 23 грудня 2014 у Wayback Machine.]
• Canvas tutorial - Web API Interfaces | MDN (en) [Архівовано 23 грудня 2014 у Wayback Machine.]
• Demo Studio | MDN (ru) [Архівовано 13 грудня 2014 у Wayback Machine.]
• Demo Studio | MDN (en) [Архівовано 14 грудня 2011 у Wayback Machine.]

Це незавершена стаття про Інтернет. Ви можете допомогти проєкту, виправивши або дописавши її.