Innehållsförteckning
Det finns olika typer av effekter och transformationer som kan appliceras på duk, gör det möjligt att generera bilder som tidigare bara kunde föreställas i flash och andra liknande verktyg.Bland dessa effekter har vi skapandet av skuggor som gör att vi kan ge en lättnad åt de ritningar som vi införlivar i våra dukDet finns också transparenseffekter som gör att vi kan överlagra ett element på ett annat och generera oändliga designsannolikheter.
Nyanser
Skuggorna tillåter oss att ge en djup och lättnadseffekt till våra element, på duken kan vi införliva dessa skuggor till elementen, för detta har vi följande egenskaper som gör att vi kan anpassa dem beroende på vad vi vill uppnå med dem:
- shadowBlur: Ställer in skärpningsgraden till ett högre värde, mindre skärpa och mer spridning av den.
- skuggaFärg: Låter dig ställa in skuggans färg.
- shadowOffsetX: Ställer in skuggans horisontella utgångspunkt.
- shadowOffsetY: Ställer in skuggans vertikala fallpunkt.
Exempel Din webbläsare stöder inte elementet duk I det här exemplet applicerar vi skuggor på en rektangel samt text och en kurva, låt oss se hur det ser ut i webbläsaren:
För att skapa öppenhet har vi två sätt, det första är att använda rgba -funktion i attribut fillStyle Y strokeStyle; det andra sättet vi har är att använda ritningsegenskapen globalAlpha som gäller universellt.
Låt oss se nedan ett exempel med den andra formen som är den enklaste och mest direkta att tillämpa, vi markerar att de värden som den accepterar globalAlpha är 0 för full transparens Y 1 för att göra det helt ogenomskinligt, i exemplet kommer vi att använda 0,5 som ett värde som tillåter oss en mellanväg:
Exempel Din webbläsare stöder inte elementet duk Som vi kan se var det vi gjorde att rita en rektangel över texten och tack vare globalAlpha vi ser effekten av transparens som gör att vi kan uppskatta de två figurerna som ritas:
