Ajax Loader
HTML
<canvas id="myCanvas"></canvas>
1
<canvas id="myCanvas"></canvas>
2
 
 
JavaScript
x
114
1
 
2
var points = [
3
    {x: 100, y: 50},
4
    {x: 120, y: 100 },
5
    {x: 160, y: 50 },
6
    {x: 200, y: 100 },
7
    {x: 300, y: 50},
8
    {x: 350, y: 350},
9
    {x: 300, y: 250},
10
    {x: 50, y: 150},
11
    {x: 100, y: 50}
12
];
13
 
14
//init canvas
15
var canvas = document.getElementById('myCanvas');
16
canvas.width = window.innerWidth - 50;
17
canvas.height = window.innerHeight - 50;
18
var ctx = canvas.getContext('2d');
19
//end init
20
 
21
 
22
//generate line
23
var lines = [];
24
for (var i = 1; i < points.length; i++) {
25
    lines.push(new Line(points[i - 1], points[i]));
26
}
27
 
28
 
29
//draw polygon
30
ctx.strokeStyle = "#00a";
31
ctx.beginPath();
32
ctx.moveTo(points[0].x, points[0].y);
33
for (var j = 1; j < points.length; j++) {
34
    p = points[j];
35
    ctx.lineTo(p.x, p.y);
36
}
37
ctx.closePath();
38
ctx.stroke();
39
 
40
// find min and max
41
var minY = points[0].y;
42
var maxY = points[0].y;
43
for (var i = 0; i < points.length; i++) {
44
    var temp = points[i].y;
45
    if (temp < minY)
46
        minY = temp;
47
    else if (temp > maxY)
48
        maxY = temp;
49
}
50
// end find
51
 
52
 
53
//draw fill line
54
ctx.strokeStyle = "#0af";
55
ctx.beginPath();
56
for (var y = minY; y < maxY; y++) {
57
    var meetPoint = getMeetPoint(y);
58
    for (var i = 1; i < meetPoint.length; i += 2) {
59
        ctx.moveTo(meetPoint[i - 1], y);
60
        ctx.lineTo(meetPoint[i], y);
61
    }
62
}
63
ctx.stroke();
64
//end fill line
65
 
66
 
67
function getMeetPoint(y) {
68
    var meet = [];
69
    for (var i = 0; i < lines.length; i++) {
70
        var l = lines[i];
71
        if (l.isValidY(y)) {
72
            meet.push(l.getX(y));
73
        }
74
    }
75
 
76
    //sort
77
    for (var i = 0; i < meet.length; i++)
78
        for (var j = i; j < meet.length; j++) {
79
            if (meet[i]>meet[j]) {
80
                var temp =meet[i];
81
                meet[i]=meet[j];
82
                meet[j]=temp;
83
            }
84
        }
85
 
86
    return  meet;
87
 
88
}
89
 
90
function Line(start, end) {
91
    this.x0 = start.x;
92
    this.x1 = end.x;
93
    this.y0 = start.y;
94
    this.y1 = end.y;
95
    this.m = (this.y1 - this.y0) / (this.x1 - this.x0);
96
 
97
    this.getX = function (y) {
98
        if (!this.isValidY(y))
99
            throw new RangeError();
100
 
101
        return 1 / this.m * (y - this.y0) + this.x0;
102
    }
103
 
104
    this.isValidY = function (y) {
105
        if (y >= this.y0 && y < this.y1) {
106
            return true;
107
        }
108
        if (y >= this.y1 && y < this.y0) {
109
            return true;
110
        }
111
 
112
        return false;
113
    }
114
}
 

scan line algorithm

CSSDeck G+