Inhoudsopgave
Er zijn verschillende soorten effecten en transformaties die op canvas kan worden toegepast, maakt dit het mogelijk om afbeeldingen te genereren die voorheen alleen in Flash en andere soortgelijke tools konden worden voorgesteld.Onder deze effecten hebben we het creëren van schaduwen waarmee we een reliëf kunnen geven aan de tekeningen die we opnemen in onze canvasEr zijn ook transparantie-effecten, waardoor we het ene element op het andere kunnen leggen, waardoor oneindige ontwerpkansen worden gegenereerd.
tinten
De schaduwen stellen ons in staat om een diepte- en reliëfeffect aan onze elementen te geven, op het canvas kunnen we deze schaduwen opnemen in de elementen, hiervoor hebben we de volgende eigenschappen waarmee we ze kunnen aanpassen, afhankelijk van wat we ermee willen bereiken:
- schaduwvervaging: Stelt de mate van scherpte van de schaduw in op een hogere waarde, minder scherpte en meer spreiding ervan.
- schaduwKleur: Hiermee kunt u de kleur van de schaduw instellen.
- schaduwOffsetX: Stelt het horizontale uitgangspunt van de schaduw in.
- schaduwOffsetY: Stelt het verticale neerzetpunt van de schaduw in.
Voorbeeld Uw browser ondersteunt het element niet canvas In dit voorbeeld passen we zowel schaduwen toe op een rechthoek als tekst en een curve, laten we eens kijken hoe dit eruitziet in de browser:
Om transparantie tot stand te brengen, hebben we twee manieren, de eerste is het gebruik van de rgba-functie in attributen vulstijl Y slagstijl; de tweede manier die we hebben is om de tekeneigenschap te gebruiken globalAlpha dat geldt universeel.
Laten we hieronder een voorbeeld bekijken met behulp van het tweede formulier dat het eenvoudigst en meest direct is om toe te passen, we benadrukken dat de waarden die het accepteert globalAlpha zijn 0 voor volledige transparantie Y 1 om het helemaal ondoorzichtig te maken, in het geval van het voorbeeld zullen we 0,5 gebruiken als een waarde die ons een middenweg geeft:
Voorbeeld Uw browser ondersteunt het element niet canvas Zoals we kunnen zien, hebben we een rechthoek over de tekst getekend en dankzij globalAlpha we zien het effect van transparantie waardoor we de twee getekende figuren kunnen waarderen:
