Съдържание
Има различни видове ефекти и трансформации които могат да бъдат приложени върху платно, това позволява да се генерират изображения, които преди това биха могли да бъдат представени само във флаш и други подобни инструменти.Сред тези ефекти имаме създаването на сенки, което ни позволява да дадем облекчение на рисунките, които включваме в нашите платноСъществуват и ефекти на прозрачност, които ни позволяват да наслагваме един елемент върху друг, генерирайки безкрайни проектни вероятности.
Сенки
Сенките ни позволяват да придадем дълбочина и релефен ефект на нашите елементи, върху платното можем да включим тези сенки към елементите, за това имаме следните свойства, които ни позволяват да ги персонализираме в зависимост от това какво искаме да постигнем с тях:
- shadowBlur: Задава степента на острота на сянката на по -висока стойност, по -малка острота и по -голямо разсейване на нея.
- shadowColor: Позволява ви да зададете цвета на сянката.
- shadowOffsetX: Задава хоризонталната изходна точка на сянката.
- shadowOffsetY: Задава вертикалната точка на падане на сянката.
Пример Вашият браузър не поддържа елемента платно В този пример прилагаме сенки към правоъгълник, както и текст и крива, нека видим как изглежда това в браузъра:
За да установим прозрачност, имаме два начина, първият е използването на rgba функция в атрибути fillStyle Y strokeStyle; вторият начин, който имаме, е да използваме свойството за рисуване globalAlpha това се прилага универсално.
Нека видим по -долу пример, използващ втората форма, която е най -простата и най -директна за прилагане, подчертаваме, че стойностите, които тя приема globalAlpha са 0 за пълна прозрачност Y 1, за да стане напълно непрозрачен, в случая на примера ще използваме 0,5 като стойност, която ни позволява средно положение:
Пример Вашият браузър не поддържа елемента платно Както виждаме, това, което направихме, беше да нарисуваме правоъгълник над текста и благодарение на globalAlpha виждаме ефекта на прозрачността, който ни позволява да оценим двете начертани цифри:
