Obsah
Existují různé druhy efekty a transformace který lze použít na plátno, umožňuje generovat obrázky, které si dříve bylo možné představit pouze ve formátu Flash a dalších podobných nástrojích.Mezi tyto efekty patří vytváření stínů, které nám umožňují poskytnout úlevu kresbám, které do nich začleníme plátnoExistují také efekty průhlednosti, které nám umožňují překrýt jeden prvek s druhým a generovat nekonečné pravděpodobnosti návrhu.
Odstíny
Stíny nám umožňují poskytnout našim prvkům hloubkový a reliéfní efekt, na plátno můžeme tyto stíny začlenit do prvků, proto máme následující vlastnosti, které nám umožňují je přizpůsobit podle toho, čeho s nimi chceme dosáhnout:
- shadowBlur: Nastavuje stupeň ostrosti stínu na vyšší hodnotu, menší ostrost a větší rozptýlení.
- shadowColor: Umožňuje nastavit barvu stínu.
- shadowOffsetX: Nastaví horizontální výstupní bod stínu.
- shadowOffsetY: Nastavuje svislý bod stínu.
Příklad Váš prohlížeč prvek nepodporuje plátno V tomto případě aplikujeme stíny na obdélník i na text a křivku, podívejme se, jak to vypadá v prohlížeči:
K zajištění transparentnosti máme dva způsoby, první je pomocí funkce rgba v atributech fillStyle Y strokeStyle; druhý způsob, který máme, je použít vlastnost kreslení globalAlpha to platí univerzálně.
Podívejme se níže na příklad pomocí druhého formuláře, který je nejjednodušší a nejpřímější na použití, a zdůrazňujeme, že hodnoty, které přijímá globalAlpha jsou 0 pro plnou transparentnost Y 1, aby byl zcela neprůhledný, v případě příkladu použijeme 0,5 jako hodnotu, která nám umožní střední cestu:
Příklad Váš prohlížeč prvek nepodporuje plátno Jak vidíme, udělali jsme nakreslení obdélníku nad text a díky globalAlpha vidíme efekt transparentnosti, který nám umožňuje ocenit dvě nakreslená čísla:
