HTML5 Canvas, вмъкване на изображения и текст
Уеб програмиране --- HTML5 --- HTML5 Canvas - вмъкване на изображения и текст
Всяка желана графика може да бъде перфектно нарисувана върху платното, от набор от линии или прости геометрични фигури до портрет с всички най-малки детайли. Но с нарастването на нивото на сложност на графиката нараства и нивото на сложност на кода. Много малко вероятно е човек сам да напише целия код, необходим за създаване на висококачествено изображение.
Вмъкване на изображения в Canvas
Вероятно сте виждали уеб страници със сателитни карти на определен регион на планетата. Тези карти са създадени от изображения на отделни участъци от земната повърхност, които тези страници изтеглят от сателит и комбинират в едно изображение. Това е пример за това как можете да направите няколко изображения и да ги обедините в едно по желания начин.
Canvas поддържа обикновени изображения чрез метода за рисуване на текстdrawImage(). За да вмъкнете изображение в платното, на метода drawImage() се предава обектът на изображението и координатите на платното, в които изображението трябва да бъде вмъкнато като параметри:
Но за да се предаде обект на изображение, той трябва първо да бъде получен. В HTML5 има три различни начина за получаване на обект на изображение. Първият подход е да го създадете сами пиксел по пиксел, като използвате методаcreateImageData(). Но този подход отнема много време и е бавен.
Вторият подход е да се използва елементът, който вече присъства в маркирането. Например, ако имаме следното маркиране:
тогава изображението може да бъде вмъкнато в платното с този код:
И накрая, можете да създадете обект на изображение и да заредите изображение от отделен файл. Недостатъкът на този подход е, чеизображението не може да се използва с метода drawImage(), докато не се зареди напълно. За да избегнете проблеми, изчакайте, докато събитието onLoad на изображението се задейства, преди да се опитате да извършите каквито и да е операции върху него.
За да разберем този процес, нека да разгледаме един пример. Да кажем, че искаме да покажем face.jpg върху платното. Теоретично това може да стане със следната последователност от операции:
Проблемът тук е, че настройката на src атрибута започва да зарежда изображението, но кодът продължава да се изпълнява, без да чака зареждането да завърши. Правилният код би бил:
Този подход може да изглежда контраинтуитивен, защото Редът, в който операциите са посочени в кода, не съвпада с реда, в който се изпълняват. В този пример методът context.drawImage() се извиква последен, малко след задаване на свойството img.src.
Изображенията имат широк спектър от приложения. Те могат да се използват за украсяване на линейно изкуство или като алтернатива на сами да рисувате изображения. Изображенията могат да се използват за различни обекти и герои, като се поставят по подходящ начин върху платното. Изображенията могат да се използват и за попълване на линии, за да им се придаде текстуриран вид.
Изкривяване на чертежи в елемента Canvas
Ако се установи, че вашето изображение е разтегнато, свито или по друг начин изкривено по някаква причина, най-вероятната причина е задаване на размера на платното чрез правило за стилов лист. Необходимо е правилно да зададете размера на платното, като посочите неговата височина и ширина в атрибутите за височина и ширина на елемента в маркирането на страницата. Може да изглежда, че тези стойности не трябва да се задават в маркирането с помощта на тази форма на етикет:
Азадайте ги в правилото на стиловата таблица по следния начин:
Но този подход няма да работи. Проблемът е, че свойствата за височина и ширина на CSS са различни от . Ако не посочите размери на платното в маркирането, размерът на платното по подразбиране е 300x150 пиксела. След това стиловият лист ще разтегне или компресира платното, за да пасне на размерите, посочени в него, като преоразмерява съответно цялото съдържание на платното. В резултат на това изображенията, поставени върху платното, ще бъдат изкривени, което, разбира се, няма да ги направи привлекателни.
Изрязване, изрязване и преоразмеряване на изображение
Функцията drawImage() приема няколко незадължителни параметъра, които ви позволяват да манипулирате изображението върху платното. Например изображение може да бъде преоразмерено чрез указване на параметрите за ширина и височина, както следва:
В този случай методът поставя изображението в рамка от 80x150 пиксела, чийто горен ляв ъгъл е разположен в точката на платното с координати (10,10). Ако първоначалният размер на изображението е бил 160x300 пиксела, тази операция намалява размера на изображението наполовина в двете посоки, което води до общ размер на крайното изображение само една четвърт от размера на оригинала.
Ако искате да вмъкнете само част от изображението в платното, четири параметъра трябва да бъдат предадени на метода drawImage() в началото на списъка с параметри. Тези опции определят позицията и размера на частта от изображението, която ще бъде изрязана:
Последните четири параметъра в този код са същите като в предишния пример - те определят позицията и размера на изображението върху платното. Да приемем, че искаме да поставим само горната половина на изображението в платното с оригинален размер 225x300 пиксела. За да направите това, от горния ляв ъгъл на изображението (точка(0,0)) изрязваме част от изображението с ширина 225 и височина 150 пиксела, която след това поставяме в платното в началната точка с координати (50,25). Всичко това се прави в един ред код:
Възможностите на метода drawImage() не са достатъчни, ако изображението, вмъкнато в платното, трябва да се завърти или скоси под определен ъгъл. Но тези и други манипулации с изображението върху платното могат да се извършват с помощта на трансформации.
Първият параметър на метода drawImage() е изображението, което трябва да се вмъкне в платното. Както току-що видяхме, това изображение може да бъде генериран обект на изображение или елемент, разположен някъде другаде в маркирането.
Поставете текст в платното
Друг тип данни, които не искаме да бъдат съставени от отделни линии и криви, е текстът. За щастие, дизайнерите на HTML5 са се погрижили за това вместо нас и предоставят два контекстни метода за рисуване за работа с текст.
Но преди да вмъкнете какъвто и да е текст в платното, трябва да укажете шрифта за него, като зададете стойността на контекстното свойствоfont. Тази стойност се посочва чрез низ със същия синтаксис като за генеричното свойство на CSS шрифта. Като минимум трябва да посочите размера на шрифта в пиксели и името му. Ако не сте сигурни за поддръжката на определен шрифт от браузърите, можете да посочите списък с шрифтове:
Можете също да го зададете на получер или курсив, като посочите подходящите опции в началото на реда:
Най-важното е, че благодарение на CSS3 могат да се използват фантастични вградени шрифтове. За да направите това, просто трябва първо да регистрирате името на шрифта в листа със стилове. След настройка на шрифта, текстът в платното се въвежда с помощта на методаfillText(). Например, следният код вмъква ред текст в платното, горе влявочийто ъгъл е в точката (10,10):
Текстът може да бъде вмъкнат навсякъде върху платното, но само по един ред наведнъж. За да вмъкнете няколко реда, трябва да направите съответния брой извиквания на метода fillText().
Вместо метода fillText(), можете да използвате друг метод за въвеждане на текст -strokeText(). Този метод въвежда очертанията на буквите на текста; цветът и дебелината на очертанията се определят от стойностите на свойствата strokeStyle и lineWidth на контекста. Следното показва използването на този метод:
Както вече беше отбелязано, методът strokeText() въвежда само очертанията на буквите. Ако искате да създадете текст в един цвят и неговия щрих в друг, можете първо да използвате метода fillText(), последван от метода strokeText().
Операцията по рисуване на текст върху платното е много по-бавна от чертането на линии и дори изображения. Скоростта не е важна при създаване на статично изображение (като диаграма), но може да бъде фактор при създаване на интерактивно приложение или анимация. Можете да оптимизирате въвеждането на текст, като първо съхраните желания текст във файл с изображение и след това го покажете на платното с помощта на метода drawImage().