HTML5 платнен елемент

Платно - ("canvas" - платно) - HTML5 елемент, предназначен за създаване на двуизмерно растерно изображение с помощта на javascript.

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

Вмъкване на елемент canvas в страница

• Ако не посочите ширина и височина, платното ще получи стойностите по подразбиране (300px X 150px). Можете също да използвате CSS, например 60%, но това не се препоръчва.
• Началото по подразбиране еГОРЕ ЛЯВО. Например (25;35) означава: 25px отляво, 35px отгоре.

Правоъгълник и платно

С канава можете да рисувате само една фигура - правоъгълник, всички останали фигури се рисуват с помощта на пътеки.

Пътеки в платно

Пътят може да създаде кръпка, очертание. Функции за изобразяване на пътя:

Позицията, където завършват команди като lineTo, например, е началната позиция за подобни команди, които също завършват на To.

Кръг (дъга) в платно

За създаване на дъги (окръжности) има метод arc() .

аргументи на метода arc():

• x - координати на центъра на окръжността по оста x
• y - координати на центъра на окръжността по оста y
• радиус - радиусът на окръжността
• startAngle - началната точка на дъгата; ъглите са в 1π радиана, (приблизително 3,14) един радиан е равен на 180°
• endAngle - крайната точка на дъгата
• обратно на часовниковата стрелка - посока на дъгата, ако е вярно, след това обратно на часовниковата стрелка, ако е невярно - по посока на часовниковата стрелка

заоблен правоъгълник върху платно - решение

arcTo метод

Кривата преминава от текущата позиция до точката (x1,y1) , а втората от (x1,y1) до точката (x2,y2) . Удобно е да създавате заоблени ъгли.

Заоблен ъгъл с радиус 20px:

инсулт, цвят, фон

Линейни и радиални градиенти на платното

линеен градиент в платно

Последователността на създаване на градиенти:

1. Дайте име на градиента и създайте градиента
2. Описване на градиента (създаване на цветови преходи)
3. Прилагане на градиент
4. Създава се фигура

Радиален градиент в платно

Командата createLinearGradient се използва за създаване на радиален градиент. Посочете позицията и радиуса на окръжностите в параметрите.

Центровете на кръговете обикновено са разположени на едно място. Пространството вътре в по-малкия кръг се запълва с първия цвят, например addColorStop(0, 'blue') , цветът избледнява, достигайки границата на по-големия кръг. Преминава към посочения цвят, например addColorStop(1, 'black') за втория кръг. Цялата останала област (извън втория кръг) се запълва с крайния цвят addColorStop(1, 'black) .

---