Javascript canvas: описание, функции, примери, ревюта

Платното се създава с таг canvas, но когато се говори за него, се има предвид API, който включва набор от функции за рисуване, линии, правоъгълници, кръгове, дъги, мащабиране и трансформиране на графични елементи.

В случая с платното на уеб страница това е правоъгълна област за растерно изображение, в която на всяка координата е зададен цвят. Canvas JavaScript не създава векторни обекти в стила на други среди като SVG или Flash, а само битови обекти като рисунка.

Всъщност можете да заредите изображение в Canvas и да манипулирате пикселите му един по един. Наскоро беше включен в HTML и не се поддържа от по-старите браузъри. Удобно е да им предоставите алтернативно съдържание под формата на фиксиран чертеж или обяснителен текст.

Платно срещу Flash

Canvas на JavaScript е стандартен елемент на HTML5, който се използва от съвременните браузъри. Flash е фирмена технология, която изисква инсталиране на плъгин. Днес повечето браузъри имат инсталиран плъгин Flash, така че тези, които не поддържат Canvas, все още функционират. Динамиката на развитието обаче предполага, че това ще се промени много скоро, тъй като новите платформи вече не работят с "Flash".

Въпреки това повечето експерти по графика смятат, че е по-лесно и бързо да се работи с Flash, отколкото с Canvas, тъй като той разполага с усъвършенствана среда за графичен дизайн (Adobe Flash CS6), докато процесът на създаване на графики на JavaScript в Canvas е малко по-труден. Ситуацията би трябвало да се промени с появата на хартиените рамки.js. Все пак имайте предвид, че новата услуга е безплатна и отворена, така че не е необходимо да се харчат пари за лиценз. Flash принадлежи на Adobe. Това обяснява факта, че днес все още се създават сложни игри с него.

Ако трябва да използвате графики с различни резолюции, векторната технология "Flash" по-ефективен от битмап платното. Но за повечето уеб графики платното се зарежда по-бързо. Flash изисква повече ресурси за работа, така че Canvas JavaScript има значително предимство при мобилните устройства. Canvas ви позволява да създавате всякакви графики - от прави линии до интерактивни игри - и ви дава възможност да редактирате изображения, да променяте тонове и граници.

ID на атрибута

Canvas е елемент на HTML, който ви позволява да създавате динамично графики и анимирани сценарии. Неговите приложения имат широк спектър от приложения: игри, интерфейси, графични редактори, динамични ефекти и 3D приложения.

Основното предимство на услугата е, че не изисква никакъв допълнителен плъгин, а само един браузър, който поддържа JavaScript html5 Canvas: Safari, Chrome, Firefox, Opera и Internet Explorer.

Например за изчертаване на два правоъгълника с различни цветове се използват няколко API функции с JavaScript. Първо резервирайте място за платното в страницата с помощта на HTML тага, след което нарисувайте. Разположението на елемента JavaScript html5 Canvas е показано на снимката.

Ако е необходимо, поставете други, като например стил, за да определите атрибутите на таблицата и да дефинирате външния им вид.

След това тествайте браузъра за съвместимост с Canvas и напишете кода.

Използвайте getElementById (), за да извлечете елемента на страницата, който подавате като параметър на Canvas. След това осъществете достъп до 2D контекста на платното и изпълнете толкова методи, колкото са необходими в контекста, за да нарисувате елементите на анимацията Canvas JavaScript.

След това въведете пълния код за изпълнение.

Правоъгълно изображение

За да нарисувате прост сив правоъгълник с размери 450 на 350 пиксела, обхващащ цялото платно, напишете кода.

Данните за широчина и височина определят размера на повърхността. Позицията, която това платно заема в мрежата, се определя от мястото, където е записан елементът HTML. Примери за JavaScript Canvas, които можете да поставите в таблица или в плаващ контейнер.

Ако платформата не поддържа стила, ще се появи текстът "Your browser does not support Canvas". След това поставете етикет, който улавя дизайна, и така създайте платното. За да можете да се позовавате на определен елемент в кода на Javascript, е удобно да му дадете идентификатор, например id = miCanvas.

След като елементът бъде създаден, се изпълнява JS кодът, който прави чертежите. Това трябва да се направи след създаването на платното. Един от начините за това е да използвате свойството onLoad. При зареждане на страницата се изпълнява функцията drawCanvas ().

Първо, какво е необходимо е да получите DOM възел, като използвате инструкциите: var canvas = document.getElementById (`miCanvas`) и подайте идентификатора на елемента canvas като параметър. След това получаваме обекта на JavaScript за контекст Canvas text:var context = canvas.getContext (`2d`).

Съществуват два възможни контекста: 2d за чертеж в две измерения и webgl за изображение в три измерения. След като имате обект на контекста, можете да приложите всички функции и свойства, свързани с него.

координатна система

Началото е (0,0), като стойностите на координатата X се движат надясно, а стойностите на координатата Y - надолу, за разлика от традиционните координатни системи. Обектът се разполага спрямо началната точка, например правоъгълник се разполага в точка (90,70). Размерът на платното Canvas е 450 ширина и 350 височина за линия: контекст.fillRect (0, 0, 450, 350). Това ще нарисува запълнен правоъгълник с горен десен ъгъл (0,0), ширина 450 и височина 350, който заема цялото платно в примера. За да нарисувате правоъгълник без запълване, приложете: strokeRect (x, y, width, height).

Canvas няма дефинирани функции за рисуване на многоъгълници, включително триъгълници и петоъгълници (с изключение на правоъгълника). Начинът за работа с платно е да се чертаят фигури или пътеки. За да построите формуляр, първо инициализирайте beginPath (), след което поставете курсора в началната точка, като приложите moveTo (x, y). Ще бъде създаден формуляр с различни възможности за изображението.

Линиите, дъгите и кривите могат да се чертаят с помощта на: stroke(), която чертае отворена или затворена форма без запълване. Ако последната точка съвпадне с първата, формата ще бъде затворена. Fill () рисува затворена форма със запълване. Ако тя е отворена, функцията създава права линия от последната точка до началната точка, за да я завърши.

Инструмент за права линия ClosePath

Те използват closePath (), за да създадат права линия от последната до началната точка.

Можете да изпълните предишния код, като го копирате и поставите, след което щракнете върху " Show code written.

Съществуват три основни метода за чертане на криви:

• Arcos, дъги.
• Curvas de Bezier, криви на Безие.
• Curvas cuadráticas, квадратни криви.

Дъгата преминава от началния до крайния ъгъл. Те се измерват в радиани. Ако параметърът посока има логическа стойност true, дъгата ще се движи в посока, обратна на часовниковата стрелка.

Криви на Безие - неговия тип линии, които са много често се използват в проектирането и изискват начална точка, крайна точка и някои контролни точки. Най-добрият начин да се запознаете с кривите на Безие е да ги нарисувате с помощта на софтуер като Illustrator или Inkscape (безплатен). Можете също така да използвате bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y), където cp1x, cp1y са координатите на първата контролна точка, cp2x, cp2y са координатите на втората контролна точка, а x и y са координатите на крайната точка на кривата.

Квадратните криви са подобни на предишните криви, но имат само една контролна точка - quadraticCurveTo (cp1x, cp1y, x, y), където cp1x, cp1y са първичните координати, а x и y са крайните.

Съчетаване на форми и стилове

За да нарисувате форма, инициализирайте функцията beginPath (), поставете курсора (moveTo (x, y)), за да създадете форми. За да го затворите по желание, използвайте closePath (). Рисувате със запълване () без запълване и щрих. Този процес може да се повтори толкова пъти, колкото е необходимо. Процесът е подобен на този, който се случва, когато рисувате с молив върху лист хартия. Всеки път, когато приключите с проследяването и свалите молива от хартията, за да го поставите на ново място, moveTo (x, y) прави същото.

Изключение от общата формула за конструиране са функциите за рисуване на правоъгълници (strokeRect (x, y, width, height) и fillRect (x, y, width, height)), които започват с moveTo (x, y) и завършват с stroke или fill. В този случай се комбинират всички необходими функции за изображения. При всяка инициализация на формата Canvas отваря структура от данни като списък, който се запълва с инструкцията при изпълнение на stroke () или fill ().

Рисуване на линейни градиенти

Създаването на платното JavaScript има функция: createLinearGradient (x_ini, y_ini, x_fin и_fin). Тя дава линеен градиент, като използва линия, определена от начална точка (x_ini, y_ini) и крайна точка (x_fin, y_fin). Посоката на тази линия показва движението на градиента. Например, ако искате градиентът да се движи вертикално, създайте вертикална линия. Той определя първия си цвят. Дължината показва интензивността на градиента. Ако се използват програми като Photoshop, действието ще бъде подобно на. За да завършите дефинирането на градиента, цветовете, които го образуват, се определят с функцията: addColorStop (позиция, цвят).

Параметърът за позиция определя мястото, където се прилага цветът, посочен във втория параметър. Позицията се изразява с число от нула до едно. Най-малко два различни цвята са необходими за за формиране на градиент. Например, ако искате да започне в червено и да завърши в бяло:

• addColorStop (0, "червено");
• addColorStop (1, "бял").

За да нарисувате радиален градиент, Canvas разполага с функцията: createRadialGradient (x1, y1, r1, x2, y2, r2).

Той дефинира радиален градиент, базиран на две окръжности, всяка от които има централно положение (x, y) и радиус (r). Ако центърът на двете окръжности е един и същ, ефектът ще бъде равномерен, докато в другия случай ще се създаде ефект на сфера в зависимост от радиуса.

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

Canvas може да работи с изображения в най-често срещаните формати (GIF, JPEG, PNG) и има функции за контрол на размера и завъртането на ниво пиксел. Това предлага големи възможности за манипулиране на изображения с Canvas. Можете да използвате изображението като фон, да създавате миниатюри, да увеличавате и промяна на цвета.

Първата стъпка в работата с canvas е да качите снимка. Има няколко начина да го направите. Ако не е напълно заредена, потребителят няма да може да работи с нея. Двата най-разпространени начина за зареждане:

1. Обект в Javascript. Използвайки ново изображение, създайте екземпляр на обекта Image, след което го наименувайте и започнете да го използвате, след като бъде заредено.
2. Изображение на уеб страница. Използвайте таг, за да заредите изображението от тялото на сайта и да му зададете идентификатор, например име, за да получите достъп до него от използвания документ.getElementById.

Ако искате да се вижда само след обработка, използвайте свойството hidden на. Има и други начини за зареждане, например чрез използване на предварително създадено изображение в друг обект. Може да се зареди и чрез данните: url. След като зареждането приключи, можете да рисувате с помощта на функцията drawImage, която поддържа няколко формата: drawImage (image, x, y). Нарисувайте изображението върху платното, като поставите горния ляв ъгъл в (x, y).

JavaScript Canvas drawimage (изображение, x, y, ширина, височина) ви позволява да мащабирате изображението. Първите три параметъра имат същата стойност като в предишния случай. Широчината и височината определят размера (в пиксели), в който ще се показва графиката. Ако макетът е по-голям от оригинала, се получава уголемяване на изображението, а ако е по-малък - миниатюризация. Ако искате да запазите изображението, без да го деформирате, трябва да запазите съотношението между ширината и височината на оригиналното изображение.

DrawImage (изображение, x1, y1, width1, height1, x2, y2, width2, height2) мащабира част от изображението. С тази функция върху платното се показва само съдържанието на цветната рамка, която е включена като фон. Тази функция взема част от оригиналното изображение, дефинирана като x1, y1 (ширина 1, височина 1), и рисува тази част в различна позиция (x2, y2) и мащаб (ширина 2, височина 2). Това създава увеличена област, тъй като стойностите на width и height 2 са по-големи от 1.

Пример за използване на ClearRect

ClearRect рисува прозрачен правоъгълник върху платното. За разлика от функциите rect, strokeRect или fillRect, които рисуват цветна фигура. Това не трябва да се бърка с рисуването на бял правоъгълник.

Фоновото изображение се задава от CSS, а върху платното се показва черен правоъгълник. Ако има бял фон, прозрачният фон ще бъде скрит. Вместо това е най-добре да използвате функцията clearRect, за да нарисувате "чист" правоъгълник на Canvas JavaScript върху платното, като по този начин позволите на произведенията на изкуството да прозират.

Можете също така да изчистите платното, като зададете ширината или височината - просто ги задайте на платното, като му присвоите нова стойност:

• // платно.ширина = 600;
• платно.ширина = canvas.ширина.

Това ще доведе до нулиране на трансформационната матрица.

Canvas JavaScript clearRect изчиства всички пиксели на платното в даден правоъгълник (x, y, w, h) до прозрачно черно. Функцията clearCanvas () може да се използва за прецизно изчистване на рисунката и текста на платното. Тази функция е полезна, когато е необходимо да се премахне целият контекст, за да се добавят нови чертежи в празен макет. Трябва да се изчиства всеки път, когато мишката се премести и се начертае нова линия.

Когато се щракне върху бутона "Задай число", на платното се показва произволно число между 1 и 100. Бутонът clearRect изважда всичко от контекста, така че числата да не се показват едно върху друго. Това ще се случи, ако бутонът "задаване на номер" бъде щракнат отново.

Синтаксисът в този случай е следният: context.clearRect(x, y, w, h).

Това е примерен код за изчертаване на запълнен правоъгълник в платното на JavaScript с помощта на fillRect, който трябва да изчисти централната част. FillRect прилага ширината и височината на платното, а clearRect използва процента от тези стойности, за да създаде рамката. В този пример е показан само методът за изчистване на платно на JavaScript. X, y, ширината и височината на изчистения правоъгълник се показват в проценти.

Изчистване на последователността:

• Зареждане на платното и рисуване на линии върху него.
• Извикайте clearRect ().
• Промяна на размера чрез манипулиране на ширината и височината на платното и елементите div със съотношение на пикселите 1: 1.

Отзиви от потребители

Canvas се справя чудесно с интеграцията на много доставчици от трети страни като Flipgrid, Padlet и Storyline. Затова е много удобно За дизайнера.

Обратна връзка от потребителите относно функционалността на услугата да работите с с Canvas JavaScript докладва следното:

• Използва прост редактор на богати текстове, който улеснява създаването на текст, вмъкването на снимки и видеоклипове, подобряването на текста с редактор на HTML. Това дава възможност на дизайнера да създаде нещо повече от текст на страницата.
• Работи чудесно с доставчици от трети страни, като ги интегрира директно в Canvas. Това свойство ви позволява да използвате допълнителни инструменти, като McGraw-Hill Connect, Kaltura, Box, Office 365, Google Drive и много други.
• Canvas има каскаден подход към организационния дизайн на ниво основен акаунт или в рамките на всеки допълнителен акаунт. Всяка подсметка наследява атрибутите на своята "родители". Управлението на всички тези елементи е изключително лесно чрез използването на импортиране на файлове от ШИС .csv. Instructure актуализира документацията на услугата.
• Платното е система за управление на обучението, Може да се използва от малка организация, която предлага само няколко урока на местно ниво, или от огромна организация, която предлага хиляди уроци курсове за Стотици хиляди ученици по света.
• Мащабируемостта на инстанциите на платното е много мощна. Услугата е интуитивна и силно персонализирана.
• Осигурява гъвкава платформа, в която потребителят може да сподели опита си с други. Подходящ за интеграция с много полезни услуги, като например Drive. Това е доста удобно, тъй като можете да използвате само функциите, които са ви необходими.
• Интеграцията с Диск и Gmail може да бъде по-интуитивна.
• Canvas има страхотно обслужване на клиенти. Добавяне на нови продукти и подобрения.
• Canvas е много гъвкав, позволява дублиране на отделни задачи.
• Canvas се интегрира добре с Crocodoc за онлайн коментиране и оценка на работата, има чудесни функции за импортиране.

Една важна функция, която потребителите биха искали да видят, е възможността за анотиране на PDF файлове или други документи в уеб платформата Canvas. Понастоящем няма такава функция в уеб версията.