Azərbaycanca
Беларускі
Dansk
Deutsch
Española
Français
Indonesia
Italiana
日本語
Қазақ
Lietuvos
Nederlands
Português
Русский
සිංහල
แบบไทย
Türkçe
Українська
中國人
United State
Afrikaans
Canvas (англ. canvas — «полотно») — елемент HTML5, який можна застосовувати для малювання графіки використовуючи скрипти (переважно JavaScript). Наприклад його можна застосувати для малювання графів, створення фотокомпозицій а також анімації.
Втілення
Елемент <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.
Див. також
Посилання
- Специфікація від 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.]
 | Це незавершена стаття про Інтернет. Ви можете проєкту, виправивши або дописавши її. |
Вікіпедія, Українська, Україна, книга, книги, бібліотека, стаття, читати, завантажити, безкоштовно, безкоштовно завантажити, mp3, відео, mp4, 3gp, jpg, jpeg, gif, png, малюнок, музика, пісня, фільм, книга, гра, ігри, мобільний, телефон, android, ios, apple, мобільний телефон, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, ПК, web, Інтернет
Canvas angl canvas polotno element HTML5 yakij mozhna zastosovuvati dlya malyuvannya grafiki vikoristovuyuchi skripti perevazhno JavaScript Napriklad jogo mozhna zastosuvati dlya malyuvannya grafiv stvorennya fotokompozicij a takozh animaciyi VtilennyaElement lt canvas gt ye chastinoyu specifikaciyi WHATWG HTML 1 travnya 2021 u Wayback Machine ta W3C HTML Canvas 2D Context 11 bereznya 2021 u Wayback Machine lt canvas gt vpershe bulo vtileno Apple v Mac OS X Dashboard ta Safari 3 1 U Gecko pidtrimka lt canvas gt z yavilasya u versiyi Firefox 1 5 u Presto z versiyi 9 0 vebbrauzera Opera a Internet Explorer pidtrimuye lt canvas gt pochinayuchi z 9 yi versiyi Shob vidobraziti lt canvas gt v html dokumenti slid vikoristati nastupnij kod lt canvas id tutorial width 150 height 150 gt lt canvas gt Vin duzhe shozhij na teg lt img gt z tiyeyu lishe rizniceyu sho ne mistit atributiv src i alt Element lt canvas gt maye vsogo dva atributi width i height Obidva voni ne ye obov yazkovimi i mozhut buti zadani cherez vlastivosti DOM Yaksho shirina i visota ne viznacheni lt canvas gt bude stvorenij shirinoyu v 300 pikseliv i 150 pikseliv zavvishki Rozmir elementa mozhe buti dovilnim i zadavatisya cherez CSS ale pri promalovuvanni kartinka masshtabuyetsya vidpovidno do komponuvannya Atribut id ne ye specifichnim dlya elementa lt canvas gt ale ye odnim z atributiv HTML za zamovchuvannyam i mozhe buti zastosovanij majzhe do vsih elementiv HTML takozh yak class napriklad Zavzhdi viznachati id elementa garna ideya tomu sho ce znachno sproshuye identifikaciyu jogo za dopomogoyu skriptiv Stil elementa lt canvas gt mozhe nalashtovuvatisya takozh yak i zvichajne zobrazhennya cherez CSS margin border background i t p Ci pravila prote ne vplivayut na same malyuvannya v lt canvas gt Yaksho niyaki nalashtuvannya stilyu ne zadani lt canvas gt bude stvorenij povnistyu prozorim Avarijnij stan U zv yazku z tim sho element lt canvas gt vidnosno novij i ne realizovanij v deyakih brauzerah takih yak Firefox 1 0 ta Internet Explorer nam neobhidno nadati yakijs avarijnij vmist elementu yaksho brauzer cej element ne pidtrimuye Ce duzhe prosto mi lishe nadayemo alternativnij vmist vseredini elementa lt canvas gt Brauzeri yaki ne pidtrimuyut lt canvas gt proignoruyut kontejner i obroblyat avarijnij vmist vseredini nogo Brauzeri zh sho pidtrimuyut lt canvas gt proignoruyut vmist kontejnera i normalno obroblyat lt canvas gt Primirom mi mozhemo vidati tekstovij opis vmistu lt canvas gt abo pokazati statichnu kartinku zamist dinamichno namalovanogo vmistu Ce mozhe viglyadati priblizno tak lt canvas id photo width 150 height 150 gt Vikoristovujte suchasnishij brauzer lt canvas gt Abo lt canvas id photo width 150 height 150 gt lt img src images photo jpg width 150 height 150 gt lt canvas gt lt canvas gt stvoryuye poverhnyu dlya malyuvannya yaka nadaye odin abo bilshe kontekstiv dlya vidtvorennya yakij vikoristovuyetsya dlya stvorennya vidobrazhuvanogo kontentu i manipulyacij z nim Mi sfokusuyemo na 2D dvomirnomu konteksti vidtvorennya yakij v nash chas ye yedinim pevnim kontekstom U majbutnomu inshi konteksti zmozhut pidtrimuvati inshi vidi vidtvorennya napriklad cilkom jmovirno sho bude dodano 3D kontekst zasnovanij na OpenGL ES lt canvas gt spochatku porozhnij i dlya togo shob sho nebud vidobraziti skriptu neobhidno otrimati kontekst vidtvorennya i malyuvati vzhe na nomu Element lt canvas gt maye DOM metod getContext i priznachenij dlya otrimannya kontekstu vidtvorennya razom z jogo funkciyami malyuvannya getContext prijmaye odin parametr tip kontekstu var canvas document getElementById tutorial var ctx canvas getContext 2d Pershim ryadkom mi otrimuyemo DOM vuzol nashogo lt canvas gt vikoristovuyuchi metod getElementById A otrimati dostup do kontekstu malyuvannya mi mozhemo metodom getContext Div takozhScalable Vector Graphics WebGL Vektorna grafika Rastrova grafikaPosilannyaSpecifikaciya vid WHATWG 7 sichnya 2015 u Wayback Machine Specifikaciya vid W3C 11 bereznya 2021 u Wayback Machine Specifikaciya vid W3C pereklad na rosijsku 17 chervnya 2016 u Wayback Machine Applications games tools and tutorials using HTML5 canvas and JavaScript Canvas Demos 23 grudnya 2014 u Wayback Machine HTML5 Canvas Tutorials 24 grudnya 2014 u Wayback Machine HTML5 Canvas Cheat Sheet 7 sichnya 2015 u Wayback Machine Kevs3D HTML5 Canvas demos by Kevin Roast 7 sichnya 2015 u Wayback Machine HTML5 Canvas Scratch Pad 9 sichnya 2015 u Wayback Machine explorercanvas HTML5 Canvas for Internet Explorer Google Project Hosting Arhivovano 11 lyutogo 2013 u WebCite Canvas HTML MDN ru 25 bereznya 2015 u Wayback Machine Canvas tutorial Web developer guide MDN ru 30 bereznya 2015 u Wayback Machine Canvas Web API Interfaces MDN en 23 grudnya 2014 u Wayback Machine Canvas tutorial Web API Interfaces MDN en 23 grudnya 2014 u Wayback Machine Demo Studio MDN ru 13 grudnya 2014 u Wayback Machine Demo Studio MDN en 14 grudnya 2011 u Wayback Machine Ce nezavershena stattya pro Internet Vi mozhete dopomogti proyektu vipravivshi abo dopisavshi yiyi