Javascript & canvas

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao ragazzi volevo mostrarvi questo script
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>HTML 5 Canvas</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            html body {
                text-align: center;
                margin:0;
                padding:0;
                background-color: #000;
                color:#FFF;
            }
            canvas {
                padding:22px
            }
        </style>
    </head>
    <body>
        <canvas id="c"></canvas>
        <script>
            k='px Impact';
            with(t=(c=document.getElementById('c')).getContext('2d')){
                w=c.width=500;
                h=c.height=300;
                a=strokeStyle='yellow';
                lineWidth=0;
                font=50+k;
                textAlign='center';
                strokeText('CRIRIC',z=118,z);
                font=32+k
            }
            p=(b=t.getImageData(0,0,z*=2,z)).data;
            Y=Math.random;
            g=Array;
            for(n=m=y=0;y<z;y++)
                for(x=0;x<z;x++,m+=4)
                    if(p[m]){g[n]=x+x;g[n+4]=y+y;n+=8;
                    }
            n/=8;
            for(i=m=j=0;j<n+n;j++){
                r=(Y()-.5)*w;s=(Y()-.5)*w;
                g[m+1]=r+s;g[m+2]=-r;g[m+3]=-s;m+=4;
            }
           
            function go(){
                
                if(!i){
                    for(i=m=j=0;j<n+n;j++){
                        r=Y()*w-z;
                        s=Y()*w-z;
                        g[m+1]=r+s;g[m+2]=-r;
                        g[m+3]=-s;m+=4;
                    }
                    
                }
                t.fillStyle='#000';
                t.fillRect(0,0,w,h);
                t.fillStyle='yellow';
                t.fillText('www.mrwebmaster.it',z,h-2);
                t.fillStyle=a;p=1-i/z;p*=p;
                for(m=j=0;j<n;j++){
                    v=p*p;
                    x=g[m++]+g[m++]*p+g[m++]*v+g[m++]*v*p;
                    y=g[m++]+g[m++]*p+g[m++]*v+g[m++]*v*p;
                    t.fillRect(x,y,3,3)
                }
                i++;
                i%=z
                
                if(i<230)
                    setTimeout("go()",9);
            }
            setTimeout("go()",1);
        </script>
    </body>
</html>
l'ho leggermente modificato, appena ritrovo la fonte originale dove c'è ne sono per tutti i gusti ve la posto
a me fa rabbrividire
l'unica pecca secondo me di questa tecnica è il consumo eccessivo di ram e cpu
voi che ne pensate?
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Molto bello però è stato scritto da cani

edit

Ho fatto dei test, su ie9 e chrome gira bene anche se il consumo è un po elevato invece su firefox si rallenta un po a metà
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Molto bello però è stato scritto da cani
non posso ancora giudicare come è stato scritto, certo è che sono bastate 50 righe di codice
sto pensando di dedicarci qualche ora e sfruttarlo un po
credo però che la versione IE che supporta il canvas sia solo la 9 e +

edit
io l'ho provato solo su FF ora provo sugli altri
calcola che la versione originale non si fermava continuava l'animazione all'infinito e dopo un po la ventola si sentiva

edit edit
si l'animazione con FF è piu lenta, il consumo non cambia
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
D [Javascript] salvare immagine canvas - paypal Javascript 0
M [Javascript] Canvas js css Javascript 1
L [Javascript] input variabili di scrittura con canvas Javascript 2
lidya123 [Javascript] Canvas circle e coordinate Javascript 7
J Incredible and Amazing 3D JavaScript Canvas Enginges Javascript 0
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 0
F Creare elementi html con javascript Javascript 2
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
G [Javascript] Errore inserimento dati Backend Node.js e workbench Javascript 1
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
D [Javascript] inserire uno script in un file php Javascript 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
K [javascript] Tecnica per rilevare celle contenenti caratteri ricevute in dinamico Javascript 1
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
S [Javascript] Problema costrutto if Javascript 0
I [Javascript] window.location.href porta alla nuova pagina e ritorna incomprensibilmente. Javascript 0

Discussioni simili