English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Quando si disegna una forma sulla lavagna HTML5, è possibile impostare come mescolare il contenuto disegnato con il contenuto già disegnato sulla lavagna. Questo articolo spiega come mescolare il contenuto di disegno con il contenuto esistente sulla lavagna.
Il contesto 2D ha due attributi che controllano il modello di sintesi della lavagna. Questi sono:
globalAlpha
globalCompositeOperation
L'attributo globalAlpha determina la trasparenza/opacità del contenuto disegnato. Può avere valori tra 0 e 1. 0 significa che il contenuto disegnato è completamente trasparente. Un valore di 0.5 significa che il contenuto disegnato è semi-trasparente. Un valore di 1 significa che il contenuto disegnato è completamente opaco. Il valore predefinito è 1.
L'attributo globalAlpha è impostato come segue:
context.globalAlpha = 0.5;
L'attributo globalCompositeOperation determina come il contenuto che disegni si mescola con l'immagine esistente sulla lavagna.
L'attributo globalCompositeOperation è impostato come segue:
context.globalCompositeOperation = "copy";
globalCompositeOperation fa riferimento a "origine" e "destinazione" e specifica come mescolare origine e destinazione. L'origine è il contenuto che disegni, la destinazione è il contenuto già disegnato. Ecco una lista dei valori possibili e del loro significato:
| Valore | Descrizione |
copy | Nelle aree sovrapposte di origine e destinazione viene visualizzata l'origine. |
destination-atop | Quando origine e destinazione si sovrappongono e entrambi non sono opachi, viene visualizzata la destinazione.Se la destinazione è trasparente, viene visualizzata l'origine. |
destination-in | Nelle aree sovrapposte di origine e destinazione e se entrambi non sono opachi, viene visualizzata la destinazione.Nelle aree senza sovrapposizione non viene visualizzata l'origine. |
destination-out | Nelle aree non sovrapposte di origine e destinazione viene visualizzata la destinazione.In ogni altro luogo viene visualizzata la trasparenza. |
destination-over | Nelle aree sovrapposte di origine e destinazione viene visualizzata la destinazione.Se non c'è sovrapposizione, viene visualizzata l'origine. |
source-atop | Nelle aree sovrapposte di origine e destinazione viene visualizzata l'origine.Nelle aree senza sovrapposizione o se l'origine è trasparente, viene visualizzata la destinazione. |
source-in | Quando origine e destinazione si sovrappongono e entrambi non sono opachi, viene visualizzata l'origine.In ogni altro luogo viene visualizzata la trasparenza. |
source-out | Nelle aree non sovrapposte di origine e destinazione viene visualizzata l'origine.In ogni altro luogo viene visualizzata la trasparenza. |
source-over | Quando la sorgente è opaca, viene visualizzata la sorgente.Il destinazione viene visualizzato in ogni altro luogo. |
lighter | I colori sorgente e di destinazione si sommano, rendendo i colori più chiari e muovendosi verso il valore 1 del colore (la massima luminosità di quel colore). |
xor |
Questo è un esempio di canvas dove puoi usare modi di composizione e valori alpha. Puoi cambiare i modi di composizione cliccando sui pulsanti. Puoi cambiare il modo Alpha usando i controlli sotto il canvas.
globalAlpha
Se vedi il campo di testo globalAlpha, inserisci un valore tra 0 e 100. Il codice convertirà il valore tra 0 e 1.0. Altrimenti, usa lo slider.
Attenzione: Al momento della scrittura di questo articolo, Firefox e Chrome gestiscono questi modi di composizione in modo diverso. Sembra anche che siano diversi da rects e text, come funzionano questi modi. Prova diversi modi nei vari browser che intendi supportare per capire come funzionano.