MRW.it Forum
  • Home
  • Forum
  • Fare Web
  • Javascript

Javascript & canvas

  • Creatore Discussione Creatore Discussione criric
  • Data di inizio Data di inizio 31 Mar 2013
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.606
54
48
TN
  • 31 Mar 2013
  • #1
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?
 
N

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
  • 31 Mar 2013
  • #2
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: 31 Mar 2013
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.606
54
48
TN
  • 31 Mar 2013
  • #3
Molto bello però è stato scritto da cani
Clicca per allargare...
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: 31 Mar 2013
Devi accedere o registrarti per poter rispondere.

Discussioni simili

D
[Javascript] salvare immagine canvas - paypal
  • dimagab
  • 5 Nov 2019
  • Javascript
Risposte
0
Visite
1K
Javascript 5 Nov 2019
dimagab
D
M
[Javascript] Canvas js css
  • mikesteaknife
  • 17 Ott 2019
  • Javascript
Risposte
1
Visite
1K
Javascript 17 Ott 2019
Max 1
L
[Javascript] input variabili di scrittura con canvas
  • lanvoel39
  • 13 Set 2019
  • Javascript
Risposte
2
Visite
2K
Javascript 18 Set 2019
lanvoel39
L
[Javascript] Canvas circle e coordinate
  • lidya123
  • 16 Mag 2017
  • Javascript
Risposte
7
Visite
3K
Javascript 18 Mag 2017
lidya123
J
Incredible and Amazing 3D JavaScript Canvas Enginges
  • JavaScriptBank
  • 17 Ago 2010
  • Javascript
Risposte
0
Visite
1K
Javascript 17 Ago 2010
JavaScriptBank
J
M
variabile javascript su link html
  • mizar1966
  • 30 Apr 2024
  • Javascript
Risposte
5
Visite
2K
Javascript 7 Mag 2024
mizar1966
M
I
Creare un banner temporaneo JavaScript
  • IlTizioScriptato
  • 25 Apr 2023
  • Javascript
Risposte
0
Visite
2K
Javascript 25 Apr 2023
IlTizioScriptato
I
S
Impossibile scorrere un oggetto in JavaScript
  • steven myth
  • 23 Set 2022
  • Javascript
Risposte
0
Visite
2K
Javascript 23 Set 2022
steven myth
S
N
Passare array da php a javascript
  • Namaste!
  • 12 Lug 2022
  • PHP
Risposte
5
Visite
3K
PHP 13 Lug 2022
WmbertSea
L
Quiz javascript funzionante da migliorare
  • Lenigmista
  • 24 Feb 2022
  • Javascript
Risposte
0
Visite
3K
Javascript 24 Feb 2022
Lenigmista
L
P
  • Bloccata
errore 404 con javascript
  • psicona
  • 31 Gen 2022
  • Javascript
Risposte
2
Visite
1K
Javascript 31 Gen 2022
Max 1
D
  • Bloccata
aiuto funzioni javascript
  • dedu
  • 9 Gen 2022
  • Javascript
Risposte
1
Visite
977
Javascript 9 Gen 2022
Max 1
M
Upload immagine con javascript problemi con FormData()
  • MBlackmore
  • 6 Ott 2021
  • Javascript
Risposte
1
Visite
1K
Javascript 6 Ott 2021
MBlackmore
M
L
  • Bloccata
countdown multiplo javascript
  • lillo21
  • 3 Ago 2021
  • Javascript
Risposte
1
Visite
1K
Javascript 3 Ago 2021
Max 1
S
  • Bloccata
Problemi Javascript + Aruba
  • sak89
  • 6 Lug 2021
  • Javascript
Risposte
2
Visite
2K
Javascript 6 Lug 2021
Max 1
M
Inviare un file su un server remoto con JavaScript
  • Mirawara
  • 25 Mag 2021
  • Javascript
Risposte
0
Visite
1K
Javascript 25 Mag 2021
Mirawara
M
T
a href="javascript:;"
  • tore90
  • 17 Mag 2021
  • Javascript
Risposte
1
Visite
2K
Javascript 1 Nov 2021
sonusood2022
S
F
Creare elementi html con javascript
  • Fra_23
  • 7 Mag 2021
  • Javascript
Risposte
3
Visite
3K
Javascript 10 Ago 2021
McLeanerGla
M
A
pulsante di update campo mysql con javascript
  • AndreaCerre
  • 31 Mar 2021
  • Javascript
Risposte
2
Visite
1K
Javascript 31 Mar 2021
AndreaCerre
A
8
Javascript - PDF Form
  • 81bankai
  • 11 Mar 2021
  • Javascript
Risposte
0
Visite
2K
Javascript 11 Mar 2021
81bankai
8
Condividi:
Facebook X (Twitter) LinkedIn WhatsApp e-mail Condividi Link
  • Home
  • Forum
  • Fare Web
  • Javascript
  • Italiano
  • Termini e condizioni d'uso del sito
  • Policy Privacy
  • Aiuto
  • Home
Community platform by XenForo® © 2010-2024 XenForo Ltd. | Traduzione a cura di XenForo Italia
Menu
Accedi

Registrati

  • Home
  • Forum
    • Nuovi Messaggi
    • Cerca...
  • Novità
    • Featured content
    • Nuovi Messaggi
    • Ultime Attività
X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?

X

Privacy & Transparency

We use cookies and similar technologies for the following purposes:

  • Personalized ads and content
  • Content measurement and audience insights

Do you accept cookies and these technologies?