Элемент <canvas> предназначен для создания графики с помощью JavaScript. Например, его используют для рисования графиков, создания фотокомпозиций, анимаций и даже обработки и рендеринга видео в реальном времени.<canvas> имеет несколько методов для рисования контуров, прямоугольников, кругов, текста и добавления изображений.
Canvas в переводе с английского означает «холст».
<canvas> տարրը նախատեսված է JavaScript-ի միջոցով գրաֆիկա ստեղծելու համար: Օրինակ՝ այն օգտագործվում է գրաֆիկներ գծելու, լուսանկարչական կոմպոզիցիաներ ստեղծելու, անիմացիաներ ստեղծելու և նույնիսկ իրական ժամանակում տեսանյութերի մշակման և մատուցման համար: <canvas>-ն ունի ուրվագծեր, ուղղանկյուններ, շրջանակներ, տեքստեր գծելու և պատկերներ ավելացնելու մի քանի մեթոդներ:
Canvas անգլերենից թարգմանաբար նշանակում է «կտավ»։
See the Pen Untitled by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.
Также canvas можно использовать для создания красивых графиков, игр и даже симуляций физики. В CodePen есть очень много хороших примеров использования canvas, которые с помощью библиотек приобретут новые краски. Один из самых простых примеров градиент + текст.
Сперва добавим градиент задав точки начало, середины, конца и зададим для него размер.
Դուք կարող եք նաև օգտագործել canvas գեղեցիկ գրաֆիկա, խաղեր և նույնիսկ ֆիզիկայի սիմուլյացիաներ ստեղծելու համար: CodePen-ը canvas-ի օգտագործման շատ լավ օրինակներ ունի, որոնք գրադարանների օգնությամբ նոր գույներ կստանան։ Ամենապարզ օրինակներից մեկը գրադիենտ + տեքստն է։
Նախ, եկեք ավելացնենք գրադիենտ՝ սահմանելով մեկնարկային, միջին, վերջնակետերը և սահմանել դրա չափը:
See the Pen Untitled by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.
Потом уже можно добавить текст и сделать текст градиентным. Сделаем так чтобы текст был в центре, поменяем цвет фона и с ним же удалим fillRect.
Այնուհետև կարող եք ավելացնել տեքստ և այն դարձնել գրադիենտ: Եկեք դարձնենք տեքստի կենտրոնը, փոխենք ֆոնի գույնը և հեռացնենք fillRect.
See the Pen canvas + gradient by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.
Если хотим чтобы только обводка было видно, то можно изменить fill на stroke.
Եթե ցանկանում ենք, որ տեսանելի լինի միայն ընդգծումը, կարող ենք fill-ը փոխել stroke-ի։
See the Pen canvas + gradient + stroke by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.
⇓Результат данного примера показан на рисунке⇓
⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓
| Browser | IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| Version | 9+ | 12+ | 4+ | 3.6+ | 4+ | 10+ |