Ajax Loader
×
HTML
<!doctype html>
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8"/>
5
  <title>Document</title>
6
</head>
7
<body>
8
  
9
  <canvas id="myCanvas"></canvas>
10
  
11
</body>
12
</html>
 
CSS
#myCanvas{
1
#myCanvas{
2
  /* border:1px; */
3
  width:500px;
4
  height:400px;
5
  margin:50px;
6
}
 
JavaScript
      var color = [
1
      var color = [
2
        'rgb(106, 210, 231)',
3
        'rgb(250, 104, 0)',
4
        'rgb(243, 132, 48)',
5
        'rgb(198, 244, 98)',
6
        'rgb(255, 107, 107)',
7
        'rgb(250, 204, 0)',
8
        'rgb(232, 125, 2)',
9
        'rgb(202, 232, 105)',
10
        'rgb(0, 169, 199)',
11
        'rgb(63, 191, 202)',
12
        'rgb(174, 225, 55)',
13
        'rgb(208, 231, 80)',
14
        'rgb(78, 189, 233)',
15
        'rgb(37, 174, 228)',
16
        'rgb(249, 214, 36)',
17
        'rgb(240, 122, 25)',
18
        'rgb(239, 169, 46)',
19
        'rgb(136, 197, 38)',
20
        'rgb(190, 242, 2)',
21
        'rgb(250, 42, 0)',
22
        'rgb(0, 178, 255)',
23
        'rgb(127, 255, 36)',
24
        'rgb(194, 255, 102)',
25
        'rgb(200, 255, 0)',
26
        'rgb(19, 205, 75)',
27
        'rgb(126, 112, 215)',
28
        'rgb(187, 233, 7)',
29
        'rgb(192, 250, 56)',
30
        'rgb(170, 255, 0)',          
31
        'rgb(255, 170, 0)',            
32
        'rgb(255, 0, 170)',
33
        'rgb(170, 0, 255)',
34
        'rgb(0, 170, 255)',
35
        'rgb(255, 255, 0)'
36
    ];
37
   
38
    var x, y, cx, cy, x0, y0, x1, y1, i, c, randc;
39
    var canvas =  document.getElementById("myCanvas");
40
    var width = canvas.width=200; 
41
    var height = canvas.height=150;
42
    var ctx = canvas.getContext("2d");
43
   
44
  
45
    randc =3;
46
    ctx.strokeStyle = color[c];
47
 
48
    for (x=0 ; x < width ; x++){      
49
        cx = x/60-2.2;      
50
   
51
        for (y=0 ; y < height  ; y++){
52
          
53
            c = 1;
54
            cy = 1.3-y/60;
55
            x0 = 0;
56
            y0 = 0;
57
            for ( i=1 ; i < 20 ; i++){
58
                x1 = x0 * x0 - y0 * y0 + cx;
59
                y1 = 2 * x0 * y0 + cy;
60
                if ((x1 * x1 + y1 * y1) > 2000){
61
                    ctx.fillRect(x , y , 1 , 1);
62
                }
63
                else{
64
                    x0 = x1;
65
                    y0 = y1;
66
                    c += randc;
67
                    ctx.fillStyle = color[c];
68
                }
69
            }
70
        }
71
        
72
      
73
    }
74
  
75
 
 

fractal

CSSDeck G+