Direkt zum Inhalt

Animierte Kreissegmente

Gespeichert von Erik Wegner am/um

Zur Darstellung von Anteilen eigenen sich Kreisdiagramme. Damit sie nicht einfach nur erscheinen, sorgt das folgende Script für ein wenig Animation beim Aufbau.


Your browser does not support the HTML5 canvas tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
(function() {
  "use strict";
  function ColorValue(color, value) {
    this.color = color;
    this.value = value;
  }
  var drawing = false; // Verhindere gleichzeitigen Aufruf
   
  function draw() {
    var data = [];
    if (drawing) return;
    drawing = true;
     
    data.push(new ColorValue("#382c1a", 10 + parseInt(Math.random()*50)));
    data.push(new ColorValue("#086782", 10 + parseInt(Math.random()*20)));
    data.push(new ColorValue("#cc8722", 10 + parseInt(Math.random()*50)));
    data.push(new ColorValue("#a3a3a3", 10 + parseInt(Math.random()*50)));
    data.push(new ColorValue("#779125", 10 + parseInt(Math.random()*50)));
    data.push(new ColorValue("#ad6600", 10 + parseInt(Math.random()*50)));
 
    var sum = 0, sumCounter = 0, datalen = data.length, i;
    for (i = 0; i < datalen; i++) {
      sum += data[i].value;
    }
 
    var center_x = 75, center_y=75, radius = 50, angle1, angle2;
 
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.lineWidth=20;
    ctx.clearRect(0, 0, c.width, c.height);
 
    function drawNext() {
      sumCounter++;
      angle1 = Math.PI * (0.5 - sumCounter/sum);
      for (i = 0; i < datalen; i++) {
        angle2 = angle1 + (2 * Math.PI * data[i].value * sumCounter / sum / sum);
        ctx.strokeStyle=data[i].color;
        ctx.beginPath();
        ctx.arc(center_x, center_y, radius, angle1, angle2);
        ctx.stroke();
        angle1 = angle2;
      }
      if (sumCounter < sum) {
        window.setTimeout(drawNext, 15);
      } else {
        drawing = false;
      }
    }
    drawNext();
  }
   
  draw();
  window.myCanvasButton_Redraw = draw;
})();