Ajax Loader
×
HTML
<p>keep mouse down and move!</p>
1
<p>keep mouse down and move!</p>
2
<canvas id="myCanvas"></canvas>
3
 
 
CSS
body{
1
body{
2
  cursor: crosshair;
3
}
4
p{
5
  position: fixed;
6
  top: 0;
7
}
8
 
9
  
 
JavaScript
var numberOfConnectedLine = 10
1
var numberOfConnectedLine = 10
2
var sampleRate = 60;//ms
3
var lineColor = "#090";
4
 
5
var canvas = document.getElementById('myCanvas');
6
canvas.width = window.innerWidth - 50;
7
canvas.height = window.innerHeight - 50;
8
 
9
var ctx = canvas.getContext('2d');
10
 
11
var c = new circleQueue(numberOfConnectedLine);
12
var mouse = new point(0, 0);
13
var mouseMoved = false;
14
var mouseDown = false;
15
 
16
canvas.addEventListener("mousemove", function (evt) {
17
    if (mouseDown) {
18
        mouse.x = evt.pageX;
19
        mouse.y = evt.pageY;
20
        mouseMoved = true;
21
    }
22
});
23
 
24
canvas.addEventListener("mousedown", function (evt) {
25
    mouseDown = true;
26
    c.reset(new point(evt.pageX,evt.pageY));
27
    lineColor='rgb(' + getRandom(255) + ',' + getRandom(255) + ',' + getRandom(255) + ')';
28
 
29
});
30
 
31
canvas.addEventListener("mouseup", function (evt) {
32
    mouseDown = false;
33
});
34
 
35
 
36
function getRandom(n) {
37
    return Math.floor(Math.random() * n);
38
}
39
 
40
function point(x, y) {
41
    this.x = x;
42
    this.y = y;
43
    this.draw = function () {
44
        ctx.beginPath();
45
        ctx.fillStyle = "#0a0";
46
        ctx.arc(this.x, this.y, 5, 0, Math.PI * 2);
47
        ctx.fill();
48
    }
49
 
50
    this.clone = function () {
51
        return new point(this.x, this.y);
52
    }
53
}
54
 
55
function circleQueue(n) {
56
    var points = new Array(n);
57
    for (var i = 0; i < points.length; i++) {
58
        points[i] = new point(0, 0);
59
    }
60
    var current = 0;
61
    this.setNextPoint = function (point) {
62
 
63
        points[current] = point.clone();
64
        current++;
65
        if (current == n)
66
            current = 0;
67
    }
68
 
69
    this.getPoints = function () {
70
        return points;
71
    }
72
 
73
    this.reset=function(point){
74
        points=new Array(n);
75
 
76
        for (var i = 0; i < points.length; i++) {
77
            points[i] = point.clone();
78
        }
79
    }
80
 
81
}
82
 
83
 
84
function drawLines() {
85
    if (!mouseMoved)return;
86
    var points = c.getPoints();
87
    ctx.strokeStyle = lineColor;
88
    var x0 = mouse.x;
89
    var y0 = mouse.y;
90
 
91
    for (var i = 0; i < points.length; i++) {
92
        var p = points[i];
93
        p.draw();
94
        ctx.beginPath();
95
        ctx.moveTo(mouse.x, mouse.y);
96
        ctx.lineTo(p.x, p.y);
97
        ctx.stroke();
98
    }
99
 
100
 
101
    c.setNextPoint(mouse);
102
    mouseMoved = false;
103
}
104
 
105
setInterval(drawLines, sampleRate);
106
 
107
 
108
/*
109
idea from http://codepen.io/matths/pen/hcdGu
110
*/
 

lines

CSSDeck G+