Ajax Loader
HTML
<canvas id='world'></canvas>
1
<canvas id='world'></canvas>
 
CSS
body{
1
body{
2
    padding:0;
3
    margin:0;
4
}
5
#world{
6
    display:block;
7
}
 
JavaScript
!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!
1
!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!
2
function(d, w){
3
    var FPS = 60;
4
    var TRAIL_PLAN = ["u","r","d","b","r","c"];
5
    pointCopy = function(src, dst){
6
        dst.x = src.x;
7
        dst.y = src.y;
8
        dst.z = src.z;
9
        return dst;
10
    };
11
    Trail = function(pos, t, plan_i){
12
        this.pos={x:0,y:0,z:0};
13
        this.start={x:0,y:0,z:0};
14
        this.goal={x:0,y:0,z:0};
15
        this.start_time;
16
        this.take_time;
17
        this.vertexes = [];
18
        pointCopy(pos, this.pos);
19
        pointCopy(pos, this.start);
20
        pointCopy(pos, this.goal);
21
        this.plan_i = plan_i%TRAIL_PLAN.length || 0;
22
        this.sz = pos.z;
23
        this.setNextGoal(t);
24
    };
25
    Trail.prototype.setNextGoal = function(t){
26
        pointCopy(this.goal, this.start);
27
        this.plan_i = (this.plan_i+1)%TRAIL_PLAN.length;
28
        switch(TRAIL_PLAN[this.plan_i]){
29
            case "r":
30
                this.goal.x += Math.random()*100+50;
31
                break;
32
            case "u":
33
                this.goal.y -= Math.random()*200+100;
34
                break;
35
            case "d":
36
                this.goal.y = 0;
37
                break;
38
            case "b":
39
                this.goal.z += Math.random()*1;
40
                break;
41
            case "c":
42
                this.goal.z = this.sz;
43
                break;
44
            default:
45
                break;
46
        }
47
        this.start_time = t;
48
        this.take_time = 100+Math.random()*100;
49
        this.vertexes.push(pointCopy(this.start, {x:0,y:0,z:0}));
50
        if(this.vertexes.length > 100){
51
            this.vertexes.splice(0,this.vertexes.length-100);
52
        }
53
    };
54
    Trail.prototype.update = function(t){
55
        quadIn(
56
            t-this.start_time,
57
            this.start,
58
            this.goal,
59
            this.take_time,
60
            this.pos
61
            );
62
        if(t-this.start_time > this.take_time){
63
            this.setNextGoal(this.start_time+this.take_time);
64
            this.update(t);
65
        }
66
    };
67
    Trail.prototype.draw = function(ctx, camera){
68
        var i;
69
        var ps = {x:0, y:0};
70
        ctx.beginPath();
71
        if(perspective(this.vertexes[0], camera, ps)){
72
          ctx.moveTo(ps.x, ps.y);
73
        }
74
        var x0 = ps.x;
75
        for(i=1; i<this.vertexes.length; i++){
76
            if(perspective(this.vertexes[i], camera, ps)){
77
            ctx.strokeStyle = "rgba(0,0,0,"+2/(this.vertexes[i].z-camera.z)+")";
78
            ctx.lineTo(ps.x, ps.y);
79
            ctx.stroke();
80
            ctx.beginPath();
81
            ctx.moveTo(ps.x, ps.y);
82
            }
83
        }
84
        if(perspective(this.pos, camera, ps)){
85
          ctx.strokeStyle = "rgba(0,0,0,"+2/(this.pos.z-camera.z)+")";
86
          ctx.lineTo(ps.x, ps.y);
87
          ctx.stroke();
88
        }
89
    };
90
    quadIn = function(t, b, c, d, dst){
91
        t /= d;
92
        dst.x = (c.x-b.x)*t*t+b.x;
93
        dst.y = (c.y-b.y)*t*t+b.y;
94
        dst.z = (c.z-b.z)*t*t+b.z;
95
    };
96
    perspective = function(point, camera, dst){
97
        var dz = point.z - camera.z;
98
        if(dz > 0){
99
            dst.x = (point.x-camera.x)/dz;
100
            dst.y = (point.y-camera.y)/dz;
101
            return true;
102
        }
103
        return false;
104
    };
105
    updateScene = function(ctx){
106
        var i;
107
        var time_now = new Date().getTime();
108
        var time_d = time_now-time_pre;
109
        for(i=0; i<trails.length; i++){
110
        trails[i].update(time_now);
111
        }
112
        camera.x += (trails[0].pos.x-camera.x-50)*0.0002*time_d;
113
        camera.y += (trails[0].pos.y-camera.y-300)*0.00002*time_d;
114
        time_pre = time_now;
115
    };
116
    drawScene = function(ctx){
117
        var i;
118
        ctx.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
119
        for(i=0; i<trails.length; i++){
120
        trails[i].draw(ctx, camera);
121
        }
122
    };
123
    var canvas = d.getElementById("world");
124
    var ctx = canvas.getContext("2d");
125
    var trails = [];
126
    var i;
127
    var time_now = new Date().getTime();
128
    var time_pre = time_now;
129
    for(i=0; i<8; i++){
130
        trails.push(new Trail({x:Math.random()*50-25, y:Math.random()*50-25, z:i}, time_now, i));
131
    }
132
    camera = {x:0, y:0, z:-2};
133
    canvas.width = w.innerWidth;
134
    canvas.height = w.innerHeight;
135
    ctx.translate(canvas.width/2, canvas.height/2);
136
    setInterval(function(){
137
        updateScene();
138
        drawScene(ctx);
139
    }, 1000/FPS);
140
}(document, window);
 

HTML5 Canvas City Trails

CSSDeck G+