Canvas: Deutschland Flagge

2014-07-14 von Mario

Glückwunsch an unsere Nationalmannschaft zum Gewinn der WM 2014.

Flagge

Damit der Browser auch komplett in den drei Farben glänzen kann, gibt es hier die entsprechende Seite dazu.

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
function mwFlagge() {
  var t = this;
  t.canvas = null;
  t.ctx = null;   //canvas context
  t.y;
 
  t.run = function(){
    t.init();
  }
 
  t.init = function(){
    t.canvas = document.getElementById('main');
    t.calculate();
    t.ctx = t.canvas.getContext('2d');
 
    window.addEventListener("resize", function(e) {
      e.preventDefault();
      t.resize();
    }, false);
 
    draw();
  }
 
  t.calculate = function(){
    t.canvas.width = window.innerWidth;
    t.canvas.height = window.innerHeight;
    t.y = window.innerHeight / 3;  
  }
 
  t.resize = function() {
    t.calculate();
    draw();
  }
 
  function draw(){
 
    t.ctx.beginPath();
    t.ctx.fillStyle = "#000000";
    t.ctx.fillRect(0,0,window.innerWidth,t.y);
 
    t.ctx.fillStyle = "#DD0000";
    t.ctx.fillRect(0,t.y,window.innerWidth,t.y);
 
    t.ctx.fillStyle = "#FFCE00";
    t.ctx.fillRect(0,t.y*2,window.innerWidth,t.y*2);
 
    t.ctx.stroke();
  }
}

Hier gehts zur Live Demo.
Download: Flagge.zip

Kategorie: IT Schlagwörter: , , ,