Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
12
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8">
5
  <title>Demo hud</title>
6
  <script src="https://cdn.polyfill.io/v1/polyfill.min.js?features=String.prototype.repeat"></script>
7
</head>
8
<body>
9
  <canvas id="c"></canvas>
10
<!--   <input type=range> -->
11
</body>
12
</html>
28
 
1
html, body {
2
  max-height: 400px;
3
  margin: 0;
4
}
5
​
6
canvas {
7
  display: block;
8
  background: #fff;
9
  margin: 20px auto;
10
/*   transform: scale(8); */
11
/*   transform-origin: 50% 0%; */
12
/*   width: 100%; */
13
/*   height: 100%; */
14
/*   border: 1px solid #ccc; */
15
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
16
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
17
    image-rendering: -o-crisp-edges;            /* Opera                          */
18
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
19
    image-rendering: pixelated; /* Chrome */
20
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
21
​
22
}
23
​
24
input {
25
  display: block;
26
  margin: 0 auto;
27
  width: 200px;
28
}
154
 
1
'use strict';
2
var c = document.querySelector('canvas'),
3
    ctx = c.getContext('2d'),
4
    width = 200,
5
    height = 100,
6
    RAD = Math.PI / 180;
7
​
8
c.width = width;
9
var hw = width/2;
10
c.height = height;
11
var hh = height/2;
12
​
13
ctx.font = 'normal 10px courier';
14
ctx.fillRect(0, 0, width, height);
15
ctx.strokeStyle = '#FFEB3B';
16
​
17
var guid = 0;
18
function Frame(speed) {
19
  this.pos = 0.01;
20
  this.speed = 1 + speed/100;
21
  this.guid = ++guid;
22
  return this;
23
}
24
​
25
Frame.prototype = {
26
  draw: function () {
27
    var scale = this.pos;
28
    var w = width;
29
    var h = height * 2.1;
30
    var x = (w / 2 - w/2*scale);
31
    var y = (height / 2 - height/2*scale*2.1);
32
​
33
    ctx.moveTo(x, y);
34
    ctx.lineTo(x, y + h*scale);
35
    ctx.lineTo(x + width*scale, y + h*scale);
36
    ctx.lineTo(x + width*scale, y);
37
  },
38
  update: function () {
39
    this.pos = this.pos * this.speed;
40
  },
41
  finished: function () {
42
    return width / 2 - width/2*this.pos < 0;
43
  },
44
};
45
​
46
var boxes = [];
47
​
48
function radians(a) {
49
  return a * RAD;
50
}
51
​
52
function square(angle) {
53
  ctx.save();
54
  ctx.translate(width/2, height/2);
55
  ctx.rotate(radians(angle));
56
  ctx.translate(-width/2, -height/2);
57
  /* criss cross...gunna make you... */
58
  // top-left -> bottom-right
59
  ctx.moveTo(0,0);
60
  ctx.lineTo(width, height);
61
  ctx.stroke();
62
  ctx.restore();
63
}
64
​
65
function init() {
66
  ctx.fillRect(0, 0, width, height);
67
  ctx.lineWidth = 1;
68
​
69
  ctx.save();
70
  square(20);
71
  square(2);
72
  square(-16);
73
  square(-36);
74
  square(-55);
75
  square(-73);
76
77
  ctx.restore();
78
}
79
​
80
function pad(s, length) {
81
  var clen = (s+'').length;
82
  return '0'.repeat(length - clen) + s;
83
}
84
​
85
function text() {
86
  var d = Date.parse('2015-07-04T10:00:00');
87
  var t = pad(((Date.now() - d) / 1000).toFixed(0), 8);
88
  var textWidth = ctx.measureText(t+'');
89
  ctx.fillText(t, width/2 - textWidth.width/2, 15);
90
}
91
​
92
function paintToBack() {
93
  var data = c.toDataURL('image/png');
94
  c.style.background = 'url(' + data + ')';
95
  ctx.clearRect(0,0,width,height);
96
}
97
​
98
var tick = 0;
99
​
100
var speed = 15;
101
​
102
var prevFrameTime = 0;
103
function draw(elapsedTime) {
104
  var timeSinceLastFrame = elapsedTime - (prevFrameTime || 0);
105
  window.requestAnimationFrame(draw);
106
107
  if (timeSinceLastFrame < 30 && prevFrameTime) {
108
    return;
109
  }
110
111
  tick++;
112
113
  prevFrameTime = elapsedTime;
114
115
  ctx.clearRect(0,0,width,height);
116
  text();
117
  var spread = 6;
118
​
119
  if (tick % speed === 0) {
120
    var f = new Frame(spread);
121
    boxes.push(f);
122
  }
123
​
124
125
  // boxes
126
  var i = 0, length = boxes.length;
127
  for (i = 0; i < length; i++) {
128
    boxes[i].update();
129
  }
130
131
  i = 0;
132
  while (boxes[i]) {
133
    if (boxes[i].finished()) {
134
      boxes.splice(i, 1);
135
    } else {
136
      i++;
137
    }
138
  }
139
140
  // do a single draw from multiple paths
141
  ctx.beginPath();
142
  for (i = 0; i < boxes.length; i++) {
143
    boxes[i].draw();
144
  }
145
  ctx.stroke();
146
  ctx.closePath();
147
}
148
​
149
ctx.imageSmoothingEnabled = false;
150
init();
151
paintToBack();
152
ctx.fillStyle = '#FFEB3B';
153
ctx.lineWidth = 2;
154
draw();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x