html5 svg vs canvas per granito come sfondo

Voglio fare un granito come sfondo http://www.tivli.com/ con un gradiente al centro. ho trovato come eseguire il gradiente con entrambi i tutorial di w3c, ma ci sono tutorial su come realizzare sfondi in granito in canvas HTML o svg? Grazie.

Il sito a cui fai riferimento usa effettivamente un semplice ‘noize.png’ e quindi usa gradienti radiali css3 per build quello sfondo. So che lo sapevi già, ne parlo per i futuri lettori.
Detto questo, presumo che nel resto della mia risposta tu voglia imparare, non una soluzione di copia-pasta.

Ho lasciato perdere tempo fa. Ma su canvas è facile e divertente … (specialmente ora il flash è FINALMENTE morto ufficialmente.

Così come altri hanno già suggerito nei commenti alla tua domanda, perché non usare un’immagine di rumore senza soluzione di continuità ? (sai dove trovarne uno: P).
Potresti comunque incorporare questa immagine come ‘DATA’ nell’html (, SUGGERIMENTO: persino o feed feed-data-image direttamente nella canvas che lo renderà come ‘noise.php’).

Ma allora .. hai ragione: cosa succede se volevi cambiare la dimensione del no?
E tu vuoi sapere come fare granito / rumore comunque ..
E descrive matematicamente / programmaticamente questo rumore più basso nel conteggio dei caratteri (dimensione del file) che fornire un’immagine già pronta (frammentazione)?

Avvia UPDATE 2 parte 1:
In realtà, dopo aver dormito bene la notte, mi sono reso conto / ricordato che il rumore visivo è uno dei modi migliori per determinare la casualità. Gli esseri umani sono notoriamente bravi a trovare modelli visivi, anche i professionisti lo usano (e in quanto tale è anche molto usato in crittografia, dove uno avrebbe bisogno, per esempio, di un utile time pad ).
Vedi anche ‘ Comandante ‘ Crockford’s YUI-lecture ‘Principles of Security’ da 19m07s a 22m37s.

Ora, perché è così importante? Bene , lo script ECMA (aka javascript) definisce una libera funzione Math.random () :

“restituisce un valore numerico con segno positivo, maggiore o uguale a 0 ma minore di 1, scelto casualmente o pseudo casualmente con una distribuzione approssimativamente uniforms su tale intervallo, utilizzando un algoritmo o una strategia dipendente dall’implementazione

Rileggere la parte in corsivo / grassetto e darsi il benvenuto alla realtà: ogni browser (marca / versione) ha la sua routine casuale !!
“Ma cosa significa?” Beh .. semplicemente messo .. A seconda dell’implementazione ES-Script del browser (versione) (cough cough IE): il rumore basato su Math.random () renderà / potrebbe rendere visibili i pattern nel tuo noise (indipendentemente dalle possibili dimensioni del tile) !!
Quindi per il resto di questa risposta assumeremo un mondo ideale in cui i browser sputeranno numeri casuali appropriati, o che tu abbia preso il controllo e usi una soluzione casuale ‘prevedibile’ più forte come è discusso in questo meraviglioso articolo che la bolla di google trapelato accidentalmente 🙂
Fine aggiornamento 2 parte 1

Quindi iniziamo con la parte del gradiente radiale. L’hai già capito.

Ok, quindi segue la funzione di rumore nella canvas (potresti farlo prima del gradiente radiale, ma questo ordine dà una grana più bella e diffonde il banding del colore che il gradiente produce -un lcd medio lo vedresti comunque dal momento che sono non true color-): questo viene fatto generando pixel casuali .
Ci sarebbero molti algoritmi diversi da usare, ho usato uno straight-forward che puoi capire senza matematica ..
Nota che generare rumore per una moderna risoluzione a schermo intero è più grande di 1 megapixel in risoluzione, quindi sarebbe lento! Per superare questo dobbiamo generare e riutilizzare una piccola tessera senza soluzione di continuità. Lo usiamo come riempimento a motivo nella nostra immagine a dimensione intera che ha già il gradiente radiale.

Suppongo anche tu voglia che il gradiente radiale sia collocato al centro della porta di visualizzazione, quindi se vuoi andare in modo fisso (al contrario del modo noize.png / css3 a cui fai riferimento), avrai anche bisogno di un extra Eventhandler ‘onResize ()’ per rendere canvas un nuovo sfondo. Perché? Bene, se tu lasci che il browser riduca automaticamente questa immagine di sfondo (creata al caricamento della pagina), allora la bella dimensione del tuo rumore cambierebbe, ANCHE portando a PATTERN visibili che non vorresti ..

(Dal momento che desidero disperatamente andare a dormire ora ..): Il resto è completamente spiegato nel codice sorgente della funzione che ho scritto per te ..

Ecco il link al codice completamente documentato che ho scritto per te: jsfiddle.net/sU74C/ e qui puoi vederlo in anteprima a schermo intero . AGGIORNAMENTO 1: funzione genNoise 80% FASTER !!

Usalo se vuoi (mantenendo il link a questa risposta) o impara da esso e fai le tue cose.
PER FAVORE, NON DIMENTICARE di accettare una risposta a questa domanda (speriamo mia :))

Spero che questo ti aiuti!

AGGIORNAMENTO 2 parte 2:
Ci sono altri modi per interagire con la canvas. Si potrebbe anche calcolare / (ri) utilizzare / generare / salvare / importare pixel-maps / array (come png o base64 o jpg o …), per esempio, vedere questo eccellente articolo su 8bit più veloce e 32bit ancora più veloce (se il browser supporta ‘Uint8ClampedArray’ come tipo di proprietà dei dati dell’object ImageData) pixel-array’s, inclusa una soluzione adeguata per tenere conto dell’endianness del processore !!

Quindi, dopo aver dato un pensiero considerevole, risulta che fare questo ‘giusto’ è in realtà una sfida e dovrebbe essere diviso in 2 parti:

  • Dove posso ottenere i miei dati di rumore (Math.random () o personalizzati casuali o predefiniti esterni (immagine, json-string, random.com) o incorporati (imballati?) Dati)?
  • Qual è il modo più veloce per build / archiviare / riutilizzare questo rumore a schermo intero / canvas.

Date le dichiarazioni nella parte 1 di questo aggiornamento e che non vogliamo schemi nel nostro rumore visibile, sto iniziando ad appoggiarmi all’utilizzo di alcuni dati di rumore “casuali” pre-renderizzati (pensati per tessere senza problemi) che sono incorporati nel generatore di rumore: altrimenti c’è il sovraccarico di eseguire la propria funzione casuale ottimizzata per il motore (tempi..un sacco ..).
Inoltre penso che si possa farla franca solo con il bianco e nero e la trasparenza in seguito. Ciò potrebbe velocizzare notevolmente le cose e ridurre i dati dei pixel incorporati.
Pensaci: il nero o il bianco è uguale a 0 o 1 ..
Nella base 64 un personaggio può rappresentare 6 bit. Quindi un’immagine 30x30px ha 900 px diviso per 6 bit = 150 caratteri (gli incrementi del punto dolce di 6px, quindi il successivo è 36px * 36px è di 216 caratteri).